/* 声のテーマ 2 つ（盗まれた人の声・見つかった人の声）。今ある部品（pg-head・pg-lead・cmt-btn・cy-crumb）に足す分だけ。クラス名は vo- */
.vo-wrap { max-width: 720px; margin: 0 auto; padding: 0 16px 48px; }
.vo-wrap * { box-sizing: border-box; }

/* 準備中・入口 */
.vo-empty { margin-top: 24px; padding: 20px 16px; background: var(--cmt-surface); border-top: 3px solid var(--cmt-text-sub); }
.vo-empty h2, .vo-join h2 { margin: 0 0 6px; font-size: var(--cmt-fs-l); color: var(--cmt-navy); }
.vo-empty p, .vo-join p { margin: 0; font-size: var(--cmt-fs-m); line-height: 1.8; }
.vo-join { margin-top: 20px; padding: 16px; background: var(--cmt-surface); }
.vo-join .cmt-btn { margin-top: 12px; }
/* 行き先がまだ無い入口は、説明ごと出さない（サイトの決まり: 行き先が空のものは画面から出ない） */
.vo-join:has(a:not([href])) { display: none; }

/* 「見かけたときは」（一覧の上の 1 文）。灰の注意書きと区別するため赤の枠 */
.vo-seen { margin-top: 20px; padding: 14px 16px; background: var(--cmt-white); border: 2px solid var(--cmt-searching); border-left-width: 8px; }
.vo-seen h2 { margin: 0 0 4px; font-size: 18px; color: var(--cmt-text); }
.vo-seen p { margin: 0; font-size: var(--cmt-fs-l); font-weight: 700; line-height: 1.8; color: var(--cmt-text); }

/* 見つかった人の声の一覧（1 件 1 行・画像なし） */
.vo-list { list-style: none; margin: 24px -16px 0; padding: 0; border-top: 1px solid var(--cmt-line); }
.vo-item { display: block; min-height: var(--cmt-touch); padding: 16px; border-bottom: 1px solid var(--cmt-line); text-decoration: none; color: var(--cmt-text); }
.vo-item b { display: block; font-size: 17px; line-height: 1.5; }
.vo-item small { display: block; margin-top: 4px; font-size: var(--cmt-fs-s); color: var(--cmt-text-sub); }
.vo-back { margin-top: 32px; }

/* レポートの一覧の中の「声」の 2 枚 */
.vo-cards { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.vo-card { display: block; height: 100%; padding: 14px 16px 16px; background: var(--cmt-white); border: 1px solid var(--cmt-line); border-top: 4px solid var(--cmt-navy); text-decoration: none; color: var(--cmt-text); }
.vo-card small { display: block; font-size: var(--cmt-fs-xs); font-weight: 700; color: var(--cmt-text-sub); }
.vo-card b { display: block; margin-top: 2px; font-size: 17px; line-height: 1.5; color: var(--cmt-navy); }
.vo-card span { display: block; margin-top: 6px; font-size: var(--cmt-fs-s); line-height: 1.7; color: var(--cmt-text); }
@media (min-width: 640px) { .vo-cards { grid-template-columns: 1fr 1fr; } }

/* 写真つきの 1 行（本人の許諾を取った写真だけ。ナンバーはぼかした写し） */
.vo-item--photo { display: flex; gap: 14px; align-items: flex-start; }
.vo-thumb { flex: none; display: block; width: 112px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cmt-surface); }
.vo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-item-t { min-width: 0; }
.vo-trust { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border: 1px solid var(--cmt-text); font-style: normal; font-size: var(--cmt-fs-s); font-weight: 700; color: var(--cmt-text); background: var(--cmt-white); }
@media (max-width: 380px) { .vo-item--photo { flex-direction: column; } .vo-thumb { width: 100%; } }
/* 扉のカード（th-hub 流用）: 声は 2 枚なので 2 列のまま */
.th-hub--voice { grid-template-columns: 1fr 1fr !important; }
.th-hub--voice .th-hub-card { aspect-ratio: auto; min-height: 0; justify-content: flex-start; padding: 14px 14px 14px; }
.th-hub--voice .th-hub-card--photo { padding-top: 0; }
.th-hub--voice .th-hub-card--photo .cmt-region-photo { position: static; display: block; aspect-ratio: 4 / 3; margin: 0 -14px 10px; overflow: hidden; }
.th-hub--voice .th-hub-card--photo::after { display: none; }
.th-hub--voice .th-hub-card small { font-size: var(--cmt-fs-s); }
.th-hub--voice { max-width: 720px; }