/* 公演ナビの共通テーマ。Bootstrap の上で色・余白・文字の段階をそろえる。 */
:root {
  color-scheme: light;
  --stage-ink: #251535;
  --stage-ink-2: #3d2354;
  --stage-pink: #b52563;
  --stage-violet: #71509d;
  --stage-cream: #fcf6f9;
  --surface: #fff;
  --surface-soft: #f4edf6;
  --muted: #706578;
  --line: #e7dce7;
  --accent-hover: #922050;
  --accent-active: #75183f;
  --hero-highlight: #f6b7d2;
  --hero-text: #e0d3ea;
  --hero-label: #e8d8ef;
  --hero-border: #9c83ae;
  --genre-warm: #98612a;
  --genre-green: #287369;
  --genre-blue: #3c6887;
  --site-accent: var(--stage-pink);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --text-small: .875rem;
  --text-body: 1rem;
  --text-title: 1.25rem;
  --text-heading: clamp(1.6rem, 3vw, 2.5rem);
  --radius: 16px;
  --bs-primary: var(--stage-pink);
  --bs-primary-rgb: 181, 37, 99;
  --bs-body-color: var(--stage-ink);
  --bs-body-bg: var(--stage-cream);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
  --bs-link-color: #8b2457;
  --bs-link-hover-color: #60153b;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
body { background: var(--stage-cream); color: var(--stage-ink); font-size: var(--text-body); line-height: 1.7; }
a { color: var(--bs-link-color); text-decoration: none; }
a:hover { color: var(--bs-link-hover-color); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--stage-violet); outline-offset: 4px; }
.btn, .form-control, .form-select { min-height: 44px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 10px; font-weight: 700; }
.btn-primary { --bs-btn-bg: var(--site-accent); --bs-btn-border-color: var(--site-accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-active); --bs-btn-active-border-color: var(--accent-active); }
.btn-outline-primary { --bs-btn-color: var(--site-accent); --bs-btn-border-color: var(--site-accent); --bs-btn-hover-bg: var(--site-accent); --bs-btn-hover-border-color: var(--site-accent); --bs-btn-active-bg: var(--site-accent); --bs-btn-active-border-color: var(--site-accent); }
.badge { line-height: 1.5; font-weight: 600; white-space: normal; border-radius: 6px; }
.badge.text-bg-primary { background: var(--site-accent) !important; }
/* ヘッダーは白い面にまとめ、検索の紫と役割を分ける。 */
.site-header, .site-header.bg-white { background: var(--surface) !important; box-shadow: none; }
.site-header .container { max-width: 1440px; gap: .5rem 1.25rem; }
.site-header .navbar-brand { color: var(--stage-ink); font-size: 1.4rem; letter-spacing: -.04em; }
.brand-mark { color: var(--site-accent); }
.site-header .nav-link, .header-account-link, .header-account-button { min-height: 44px; display: inline-flex; align-items: center; }
.site-header .navbar-nav { gap: .75rem !important; }
.header-search { min-height: 44px; border-radius: 10px; }
.header-search button { min-width: 44px; }
.header-account { padding-left: .75rem; max-width: 100%; flex-wrap: wrap; }
.header-account-name { max-width: 12rem; }
/* エリア → ジャンル → キーワードの順で選べる検索。 */
.top-hero { color: var(--surface); background: var(--stage-ink-2); border: 0; }
.top-hero-inner { max-width: 1100px; padding: var(--space-5) var(--space-3); }
.top-hero-catch { margin-bottom: var(--space-4); text-align: left; }
.top-hero-catch-title { font-size: var(--text-heading); font-weight: 800; line-height: 1.4; letter-spacing: .01em; margin-bottom: .5rem; }
.top-hero-catch-title span { color: var(--hero-highlight); }
.top-hero-catch > p:last-child { color: var(--hero-text); font-size: var(--text-small); }
.top-hero-search { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr); max-width: none; gap: .75rem 1rem; margin: 0; }
.hero-step { display: block; color: var(--hero-label); font-size: var(--text-small); font-weight: 700; }
.hero-region-label, .hero-genres, .hero-keyword-label, .top-hero-search .input-group, .top-zone-nav { grid-column: 1 / -1; }
.top-hero-prefecture, .top-hero-city, .top-hero-near { width: 100%; min-height: 52px; border-radius: 10px; }
.hero-genres { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.hero-genres .hero-step { flex: 0 0 100%; }
.top-zone-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .5rem 1rem; font-size: var(--text-small); color: var(--surface); background: transparent; border: 1px solid var(--hero-border); border-radius: 999px; }
.top-zone-chip:hover, .top-zone-chip.active { background: var(--surface); border-color: var(--surface); color: var(--stage-ink); text-decoration: none; }
.top-zone-chip:focus-visible { outline-color: var(--hero-highlight); }
.top-hero-search .input-group { width: 100%; flex-wrap: nowrap; }
.top-hero-search .form-control { min-width: 0; min-height: 56px; padding-inline: 1rem; border-radius: 10px 0 0 10px; }
.top-hero-search .input-group .btn { min-width: 100px; border-radius: 0 10px 10px 0; }
.top-zone-nav { justify-content: flex-start; gap: .5rem; }
.top-zone-nav:empty { display: none; }
/* 「現在地から検索」のスイッチ（エリアの行の左端） */
.hero-near-switch { display: flex; align-items: center; gap: .6rem; min-height: 52px; margin: 0; padding: 0 1rem; color: var(--surface); background: rgba(255, 255, 255, .1); border: 1px solid var(--hero-border); border-radius: 10px; }
.hero-near-switch .form-check-input { flex: 0 0 auto; width: 2.5rem; height: 1.4rem; margin: 0; float: none; cursor: pointer; }
.hero-near-switch .form-check-input:checked { background-color: var(--hero-highlight); border-color: var(--hero-highlight); }
.hero-near-switch .form-check-label { font-weight: 700; font-size: var(--text-small); cursor: pointer; white-space: nowrap; }
/* disabled は色で分かるように: 背景を暗く、文字・枠を薄く、枠は点線、カーソルは禁止マーク */
.top-hero-search .form-select:disabled { color: rgba(255, 255, 255, .5); background-color: rgba(255, 255, 255, .06); background-image: var(--bs-form-select-bg-img); border: 1px dashed var(--hero-border); opacity: .7; cursor: not-allowed; }
.top-hero-search .form-select:disabled option { color: var(--stage-ink); }
.hero-near-note { grid-column: 1 / -1; margin: 0; color: var(--hero-text); font-size: var(--text-small); }
/* タグのトグル: 角のあるチェックボックス型（ジャンルの丸いチップと形で見分ける） */
.hero-targets { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-block: .5rem; }
.hero-targets .hero-step { flex: 0 0 100%; }
.target-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem; font-size: var(--text-small); font-weight: 700; color: var(--surface); background: rgba(255, 255, 255, .1); border: 1px solid var(--hero-border); border-radius: 6px; }
.target-toggle:hover { background: rgba(255, 255, 255, .2); color: var(--surface); text-decoration: none; }
.target-toggle.is-on { background: var(--hero-highlight); border-color: var(--hero-highlight); color: var(--stage-ink); }
.target-toggle:focus-visible { outline: 2px solid var(--hero-highlight); outline-offset: 2px; }
/* エリアの行（都道府県・市区町村・現在地スイッチ・距離）: PC は 4 列、タブレットは 2 列、スマホは 1 列 */
@media (min-width: 992px) { .top-hero-search { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .top-hero-search { grid-template-columns: minmax(0, 1fr); } }

/* 本文と補助ナビゲーション。 */
.site-layout { grid-template-columns: 190px minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-4); }
.top-side-nav { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: .75rem; }
.top-side-nav a { display: flex; align-items: center; min-height: 44px; padding: .5rem; border-radius: 8px; font-size: var(--text-small); }
.top-side-nav a:hover, .top-side-nav a.active { background: var(--surface-soft); color: var(--site-accent); text-decoration: none; }
.top-side-main .bi, .top-side-sub .bi { color: var(--site-accent); }
.top-section { margin-top: var(--space-4); }
.top-section-heading { padding: 0 0 .75rem; background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); align-items: center; }
.top-section-title { font-size: var(--text-title); font-weight: 800; }
.top-section-more { display: inline-flex; align-items: center; min-height: 44px; color: var(--site-accent); font-size: var(--text-small); }
.top-genre-tile { min-height: 64px; border: 1px solid var(--line); border-radius: 12px; }
.top-rank-list a { min-height: 48px; }
/* 一覧は一公演一行。内容に合わせて伸ばし、見出しと料金を省略しない。 */
.home-event-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.home-event-card, .concert-card { position: relative; --genre-accent: var(--stage-violet); height: auto; width: 100%; overflow: visible; padding: 0; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--genre-accent); border-radius: var(--radius); box-shadow: none !important; }
.home-event-card:hover, .concert-card:hover { border-color: var(--genre-accent); transform: none; box-shadow: none !important; }
.home-event-card__link, .home-event-card a.home-event-card__link, .concert-card-layout { display: flex; align-items: flex-start; gap: var(--space-3); height: auto; padding: var(--space-3); color: var(--stage-ink); }
.home-event-card__link:hover { color: var(--stage-ink); text-decoration: none; }
.home-event-card .home-event-info, .concert-card-info { min-width: 0; flex: 1; overflow: visible; padding: 0 !important; padding-right: 8rem !important; }
.event-title, .concert-card .card-title { color: var(--stage-ink); display: block; height: auto !important; min-height: 0; overflow: visible; margin: 0; font-size: var(--text-title) !important; line-height: 1.55 !important; font-weight: 750 !important; text-align: left !important; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
.event-title-row, .concert-card-title-row { display: flex; align-items: baseline; gap: .5rem; margin: .35rem 0 .5rem; }
.event-genre-icon { flex-shrink: 0; }
.event-organizer { white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: var(--text-small); color: var(--muted); margin-bottom: .25rem; }
.event-date, .event-place { white-space: normal; overflow: visible; position: static; width: auto; height: auto; clip-path: none; display: block; font-size: var(--text-small); color: var(--muted); margin-bottom: .5rem; overflow-wrap: anywhere; }
.home-event-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0; }
.home-event-tags .badge, .concert-card .badge { font-size: .8rem; }
.home-event-tags .text-bg-light { background: var(--surface-soft) !important; color: var(--genre-accent) !important; border-color: transparent !important; }
.event-price { margin: .75rem 0; color: var(--site-accent); font-size: 1.125rem; font-weight: 750; overflow-wrap: anywhere; }
.event-description { display: block; font-size: var(--text-small); color: var(--muted); line-height: 1.7; margin: .5rem 0; -webkit-line-clamp: unset; }
.event-action { position: absolute; right: 1.5rem; bottom: 1rem; display: inline-flex; min-height: 44px; gap: .75rem; align-items: center; color: var(--site-accent); font-weight: 700; font-size: var(--text-small); }
.home-event-card--classical, .home-event-card--traditional { --genre-accent: var(--stage-violet); }
.home-event-card--jazz, .home-event-card--pops, .home-event-card--rakugo { --genre-accent: var(--genre-warm); }
.home-event-card--theatre, .home-event-card--workshop, .home-event-card--talk { --genre-accent: var(--genre-green); }
.home-event-card--musical, .home-event-card--dance { --genre-accent: var(--stage-pink); }
.home-event-card--children, .home-event-card--film { --genre-accent: var(--genre-blue); }
/* Bootstrap の列数指定がある一覧にも共通の行幅を適用する。 */
.row > .col:has(> .concert-card) { width: 100%; }
.top-section .home-event-grid > :nth-child(n + 5) { display: block; }
.save-btn { top: 1rem; right: 1rem; width: 44px; height: 44px; color: var(--muted); background: var(--surface); border-color: var(--line); }
.save-btn.is-saved { color: var(--site-accent); background: var(--surface-soft); }
.save-btn-detail { flex-shrink: 0; }
.performer-heart { display: inline-flex; align-items: center; gap: .15rem; }
.performer-item { display: inline-flex; align-items: center; } /* 出演者名とフォローを、上下の中心でそろえる */
.concert-card a.badge, .detail a.badge { display: inline-flex; align-items: center; min-height: 44px; }
/* 日付ブロックはジャンルの色を使い、月ごとの多色化を避ける。 */
.cal-tile { flex: 0 0 80px; width: 80px; display: flex; flex-direction: column; text-align: center; border-radius: 10px; overflow: hidden; background: var(--surface-soft); color: var(--stage-ink); line-height: 1.3; }
.cal-tile__top { padding: .4rem .2rem; background: var(--genre-accent, var(--stage-violet)); color: var(--surface); font-size: .8rem; font-weight: 700; }
.cal-tile__day { font-size: 2.3rem; font-weight: 800; padding: .4rem .2rem 0; font-variant-numeric: tabular-nums; }
.cal-tile__wd { display: flex; flex-direction: column; font-size: .875rem; padding: .2rem .25rem .6rem; }
.cal-tile__wd small { font-size: .75rem; }
/* 詳細はキー情報をひとまとまりにし、地図は住所直下に残す。 */
.detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none !important; overflow-wrap: anywhere; }
.detail > .card-body { padding: var(--space-4); }
.detail h1 { font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.5; margin-bottom: var(--space-3); }
.detail-key-info { display: grid; gap: var(--space-3); margin: 1rem 0 2rem; padding: var(--space-3); background: var(--surface-soft); border-radius: 12px; }
.detail-schedule { display: flex; gap: var(--space-3); align-items: flex-start; }
.detail-label { display: block; color: var(--muted); font-size: var(--text-small); margin-bottom: .35rem; }
.detail-full-schedule { white-space: pre-line; }
.detail dt { color: var(--muted); font-size: var(--text-small); padding-top: .4rem; }
.detail dd { padding-block: .4rem; margin-bottom: 1rem; }
.detail dd a:not(.badge):not(.btn) { display: inline-block; min-height: 44px; padding-block: .4rem; }
/* カードの展開の中のリンクは、app.css の `.home-event-card a`（block・高さ 100%）を受けない。ボタンは、ボタンの形のまま */
.home-event-card .card-expand a { height: auto; }
.home-event-card .card-expand a.btn { display: inline-flex; color: var(--bs-btn-color); text-decoration: none; }
.home-event-card .card-expand a.btn:hover, .home-event-card .card-expand a.btn:focus-visible { color: var(--bs-btn-hover-color); }
.hall-key-info { margin-top: var(--space-3); padding: var(--space-3); border-radius: 12px; background: var(--surface-soft); }
.detail-key-info .btn { justify-self: start; }
.site-footer { background: var(--surface); border-color: var(--line) !important; margin-top: var(--space-5); }
.site-footer a { display: inline-block; padding-block: .35rem; }
@media (max-width: 991.98px) {
  .site-layout { display: block; padding: 1rem; }
  .top-side-nav { padding: .35rem .5rem; margin-bottom: 1.5rem; }
  .top-side-nav ul { gap: .25rem; }
  .top-side-me { border: 0; margin: 0; padding-top: 0; }
  .site-header .container { flex-wrap: wrap; }
  .site-header .navbar-nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap !important; overflow-x: auto; }
  .site-header .nav-link { white-space: nowrap; }
  .header-account { margin-left: auto; }
}
@media (max-width: 575.98px) {
  .top-hero-inner { padding: 2rem 1rem; }
  .top-hero-search { grid-template-columns: minmax(0, 1fr); }
  .hero-region-label, .hero-genres, .hero-keyword-label, .top-hero-search .input-group, .top-zone-nav { grid-column: 1; }
  .top-hero-catch-title { font-size: 1.8rem; }
  .top-hero-search .input-group .btn { min-width: 88px; padding-inline: .75rem; }
  .home-event-card__link, .home-event-card a.home-event-card__link, .concert-card-layout { flex-direction: column; padding: 1.25rem; gap: 1rem; }
  .home-event-card .home-event-info, .concert-card-info { width: 100%; padding-right: 0 !important; }
  .cal-tile { flex-basis: auto; width: 76px; }
  .event-title, .concert-card .card-title { font-size: 1.125rem !important; }
  .event-action { position: static; }
  .detail > .card-body, .card-expand .detail > .card-body { padding: 1.25rem; }
  .card-expand .detail dl.row { grid-template-columns: minmax(0, 1fr); }
  .detail-key-info, .hall-key-info { padding: 1rem; }
  .detail-schedule { flex-direction: column; }
  .top-section-heading { gap: .5rem; }
  .top-section-title { font-size: 1.125rem; }
  .top-section-more { white-space: nowrap; }
  .top-rank-list { grid-template-columns: minmax(0, 1fr); }
  .header-account-name { max-width: 8rem; }
  .site-layout > main.container { padding-inline: 0; }
}

/* カードのクリックで、下へ伸びて詳細を出す（design.js）。高さは grid の 0fr → 1fr でアニメーションする */
.card-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s ease; }
.card-expand-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .32s; }
[data-expandable].is-expanded > .card-expand { grid-template-rows: 1fr; }
[data-expandable].is-expanded > .card-expand > .card-expand-inner { visibility: visible; transition-delay: 0s; }
[data-expandable] { cursor: pointer; }
[data-expandable] .card-expand { cursor: auto; }
[data-expandable].is-loading { opacity: .75; }
.event-action .bi-chevron-down { display: inline-block; transition: transform .32s ease; }
[data-expandable].is-expanded .event-action .bi-chevron-down { transform: rotate(180deg); }
.card-expand .detail { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.card-expand .detail > .card-body { --card-date-col: calc(80px + var(--space-3)); padding: var(--space-3) var(--space-4) var(--space-4) var(--space-3); } /* 左は、カード本体と同じ余白。項目名は日付の列、中身は情報の列（日付 80px + 余白）にそろえる */
.card-expand .detail dl.row { display: grid; grid-template-columns: var(--card-date-col) minmax(0, 1fr); --bs-gutter-x: 0; margin: 0; }
.card-expand .detail dl.row > * { width: auto; max-width: none; margin-left: 0; padding-inline: 0; }
.card-expand .detail dl.row > .offset-sm-3, .card-expand .detail dl.row > .col-12 { grid-column: 2 / -1; }
.card-expand .detail > .card-body > :not(dl) { margin-left: var(--card-date-col); }
@media (max-width: 575.98px) {
  /* スマホは、カードが縦並び。項目名と中身も縦に並べる */
  .card-expand .detail dl.row { grid-template-columns: minmax(0, 1fr); }
  .card-expand .detail dl.row > .offset-sm-3, .card-expand .detail dl.row > .col-12 { grid-column: 1 / -1; }
  .card-expand .detail > .card-body > :not(dl) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card-expand, .event-action .bi-chevron-down { transition: none; }
  .card-expand-inner { transition: none; }
}
/* 公演詳細の出演者: 1 人 1 行。ハートの 44px が行間を広げないよう、行の高さを詰める（押せる範囲は縦にはみ出して保つ） */
.performer-row { line-height: 1.3; }
.detail dd .performer-row a:not(.badge) { min-height: 0; padding-block: 0; }

/* 元データへのボタン（公演詳細・カードの展開の末尾）。濃い地に桃色の丸いアイコン。押すと桃色に変わる */
.detail-origin { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-3); }
.origin-btn { display: inline-flex; align-items: center; gap: .75rem; min-height: 48px; padding: .4rem 1.1rem .4rem .45rem; color: #fff; background: linear-gradient(135deg, var(--stage-ink-2), var(--stage-ink)); border-radius: 999px; box-shadow: 0 2px 8px rgba(37, 21, 53, .22); font-weight: 700; font-size: var(--text-small); line-height: 1.2; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.origin-btn small { font-weight: 400; opacity: .8; }
.origin-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 1.2rem; color: #fff; background: var(--stage-pink); border-radius: 50%; }
.origin-btn__arrow { margin-left: .25rem; opacity: .85; transition: transform .2s ease; }
.detail .origin-btn, .detail .origin-btn:hover, .detail .origin-btn:focus-visible { color: #fff; }
.origin-btn:hover, .origin-btn:focus-visible { color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--stage-pink), var(--accent-hover)); box-shadow: 0 4px 14px rgba(181, 37, 99, .35); transform: translateY(-1px); }
.origin-btn:hover .origin-btn__arrow, .origin-btn:focus-visible .origin-btn__arrow { transform: translate(2px, -2px); }
.origin-btn:focus-visible { outline: 3px solid var(--hero-highlight); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .origin-btn, .origin-btn__arrow { transition: none; transform: none !important; } }

/* レビュー（星 1〜5 と文章） */
.review-stars { color: var(--genre-warm, #d9a406); letter-spacing: .1em; white-space: nowrap; }
.review-average { display: inline-flex; align-items: baseline; gap: .5rem; }
.review-form { display: grid; gap: .75rem; padding: var(--space-3); margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.review-form .form-control { font-size: 1rem; }
.review-delete { margin-bottom: var(--space-3); }
.review-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* 星の入力: 5 → 1 の順に並べて row-reverse にし、選んだ星より左（小さい数）を塗る */
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; width: fit-content; border: 0; padding: 0; margin: 0; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 1.7rem; color: var(--line); cursor: pointer; }
.star-input input:checked ~ label, .star-input label:hover, .star-input label:hover ~ label { color: var(--genre-warm, #d9a406); }
.star-input input:focus-visible + label { outline: 2px solid var(--stage-violet, #5b3b8c); outline-offset: 2px; border-radius: 8px; }
.review-list { display: grid; gap: .75rem; }
.review-item { padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.review-item.is-mine { border-color: var(--stage-violet, #5b3b8c); }
.review-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.review-body { margin: .5rem 0 0; overflow-wrap: anywhere; }

/* サイドバーの「レビュー募集中！」と、その一覧のカードの案内 */
.top-side-nav a.side-review { color: var(--stage-pink); font-weight: 700; }
.top-side-nav a.side-review .bi { color: var(--stage-pink); }
.review-cta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin: .5rem 0; }
.review-cta-score { font-weight: 700; }
.review-cta-score .bi { color: var(--genre-warm, #d9a406); }

/* ハートの下の、気になるに入れた人の数 */
.save-count { position: absolute; top: calc(1rem + 46px); right: 1rem; width: 44px; text-align: center; color: var(--site-accent, #b0275e); font-size: .8rem; font-weight: 700; line-height: 1.2; }
.save-count[hidden] { display: none; }
.save-btn-detail { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; }
.save-btn-detail .save-count { position: static; width: auto; }

/* 棚の見出しの下の、短い説明 */
.top-section-note { margin: -.25rem 0 .75rem; color: var(--muted); font-size: var(--text-small); }