/* ============================================================
   reader-voices.css — Takumi Senpai · Reader Voices (per-article)
   Path: /css/reader-voices.css
   Load on: 記事単位で「1つの問い」を読者に投げ、回答を並べる記事のみ
            （style.css / clue-footer-cta.css の後）

   【役割】
   記事ごとに固有の「ひとつの問い」を置き、
     ① すでにSNSで集まっている回答（seed）を名前なしで羅列する
     ② 読者がその場で自分の答えを1行送れる
   ための、記事本文に馴染むインラインセクション。

   【デザイン方針】
   clue-footer-cta.css（Atlasの常設CTA）の語彙をそのまま踏襲する —
   Space Mono のラベル、Cormorant Garamond の問い、ゴールドの区切り線、
   カード風の枠は付けない。違いは「回答の壁」が挟まること。
   回答は引用符も枠も付けず、細いゴールドの縦線だけで並べる
   （.interview-block と同じ考え方をもっと軽くしたもの）。
   送信後の演出は最小限 — 自分の答えが列の末尾に静かに足されるだけ。

   Prefix: rv- (Reader Voices / 衝突回避。qp- は quest-progress が使用中)
   ============================================================ */

:root {
  --rv-accent:      #c9a84c;
  --rv-text:        rgb(240, 236, 228);
  --rv-text-soft:   rgba(240, 236, 228, 0.82);
  --rv-text-muted:  rgba(240, 236, 228, 0.55);
  --rv-text-faint:  rgba(240, 236, 228, 0.30);
}

/* ════════════════════════════════════════════════════════════
   WRAP
   ════════════════════════════════════════════════════════════ */
.rv-wrap {
  max-width: 640px;
  margin: 96px auto;
  padding: 0 24px;
}

.rv-inner {
  padding-top: 46px;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  text-align: center;
}

/* ── Eyebrow ── */
.rv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rv-accent);
  opacity: 0.85;
  margin-bottom: 18px;
}

/* ── Question（textarea の <label> も兼ねる） ── */
.rv-question {
  display: block;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.42;
  color: var(--rv-text);
  margin: 0 0 10px;
  cursor: text;
}

/* ── Intro（「誰も一致しなかった」の一文） ── */
.rv-intro {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--rv-text-muted);
  margin: 0 0 30px;
}

/* ════════════════════════════════════════════════════════════
   ANSWER WALL — 名前なし・メッセージだけを羅列する
   ════════════════════════════════════════════════════════════ */
.rv-answers {
  max-width: 480px;
  margin: 0 auto 30px;
  text-align: left;
}

.rv-answers-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rv-text-faint);
  margin-bottom: 14px;
}

.rv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rv-item {
  position: relative;
  padding: 9px 0 9px 16px;
  border-left: 1px solid rgba(201, 168, 76, 0.22);
}
.rv-item + .rv-item { margin-top: 2px; }

.rv-item p {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.06rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.7;
  color: var(--rv-text-soft);
  margin: 0;
}

/* ── 自分が今送った回答 ── */
.rv-item.is-mine {
  border-left-color: var(--rv-accent);
}
.rv-item.is-mine p { color: var(--rv-text); }

.rv-mine-tag {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rv-accent);
  opacity: 0.9;
  margin-bottom: 4px;
}

/* 追加された瞬間だけ、静かに現れる（スタンプ・紙吹雪の類は付けない） */
@keyframes rvFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rv-item.is-new { animation: rvFadeIn 0.45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .rv-item.is-new { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   FORM — 確認画面なし。書いて押したら、その場で列に足される
   ════════════════════════════════════════════════════════════ */
.rv-form {
  max-width: 480px;
  margin: 0 auto;
}

.rv-textarea {
  display: block;
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(201, 168, 76, 0.20);
  outline: none;
  padding: 14px 16px;
  font-family: 'Space Mono', monospace;
  font-size: 0.80rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--rv-text);
  caret-color: var(--rv-accent);
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
  -webkit-appearance: none;
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rv-textarea:focus {
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.08);
}
.rv-textarea::placeholder { color: rgba(240, 236, 228, 0.24); }

.rv-error {
  font-family: 'Space Mono', monospace;
  font-size: 0.60rem;
  letter-spacing: 0.06em;
  color: #d97575;
  text-align: left;
  margin: 10px 2px 0;
}

.rv-submit {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: var(--rv-accent);
  color: #17130c;
  border: none;
  outline: none;
  padding: 13px 18px;
  font-family: 'Space Mono', monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, opacity 0.18s ease;
}
.rv-submit:hover:not(:disabled) { background: #e0be62; }
.rv-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 送信直後の注記 / 配信できなかったときの注記 ── */
.rv-note {
  font-family: 'Space Mono', monospace;
  font-size: 0.58rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--rv-text-faint);
  margin: 16px 2px 0;
}
.rv-warn {
  font-family: 'Space Mono', monospace;
  font-size: 0.60rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: rgba(240, 236, 228, 0.5);
  text-align: left;
  margin: 12px 2px 0;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .rv-wrap     { margin: 64px auto; padding: 0 20px; }
  .rv-inner    { padding-top: 34px; }
  .rv-question { font-size: 1.26rem; }
  .rv-item p   { font-size: 1.0rem; }
  .rv-textarea { font-size: 16px; } /* iOS Safari の自動ズーム防止 */
}