/* ============================================================
   clue-footer-cta.css — Takumi Senpai · Atlas Clue Footer CTA
   Path: /css/clue-footer-cta.css
   Load on: quest article pages, after style.css / ts-memory-popup.css

   【役割】
   Quest記事の「Further Question」（Field Report Summaryの直後）に
   置く、常設のClue入力エリア。ts-memory-popup.js（既存の記憶
   ポップアップ）とは別の入口として共存する — ポップアップと違い、
   閉じたり自動で消えたりしない。スクロールすれば必ずそこにある。

   【デザイン方針】
   ts-memory-popup.css のフォーム部分（Space Mono ラベル、
   Cormorant Garamond の問いかけ、ゴールドアクセント）と同じ語彙を
   踏襲しつつ、フロート型カードではなく記事本文にそのまま馴染む
   インラインブロックとして実装している。
   カード風の背景・枠は付けない — Takumi自身の調査ではなく、
   読者自身の番であることを示すため、上部に一本のゴールドの
   区切り線だけを引いて静かに間を空ける。
   送信後の演出は最小限（テキストの静かな置き換えのみ）。
   スタンプ・回転・紙吹雪等の派手な演出はあえて付けない。

   Prefix: cfc- (Clue Footer CTA / 衝突回避)
   ============================================================ */

:root {
  --cfc-accent:      #c9a84c;
  --cfc-accent-mid:  rgba(201, 168, 76, 0.35);
  --cfc-text:        rgb(240, 236, 228);
  --cfc-text-muted:  rgba(240, 236, 228, 0.55);
  --cfc-text-faint:  rgba(240, 236, 228, 0.24);
}

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

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

/* ── Eyebrow ── */
.cfc-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(--cfc-accent);
  opacity: 0.85;
  margin-bottom: 18px;
}

/* ── Question (also acts as <label> for the textarea) ── */
.cfc-question {
  display: block;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1.42;
  color: var(--cfc-text);
  margin: 0 0 28px;
  cursor: text;
}

/* ════════════════════════════════════════════════════════════
   FORM
   ════════════════════════════════════════════════════════════ */
.cfc-form {
  max-width: 480px;
  margin: 0 auto;
}

.cfc-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(--cfc-text);
  caret-color: var(--cfc-accent);
  resize: vertical;
  min-height: 96px;
  box-sizing: border-box;
  -webkit-appearance: none;
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cfc-textarea:focus {
  border-color: rgba(201, 168, 76, 0.55);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.08);
}

.cfc-textarea::placeholder {
  color: rgba(240, 236, 228, 0.24);
}

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

/* ── Submit ── */
.cfc-submit {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: var(--cfc-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;
}

.cfc-submit:hover:not(:disabled) {
  background: #e0be62;
}

.cfc-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
   SUCCESS STATE — quiet text swap only, no stamp/animation
   ════════════════════════════════════════════════════════════ */
.cfc-success {
  max-width: 480px;
  margin: 0 auto;
  padding: 18px 0 4px;
}

.cfc-success-text {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cfc-text-muted);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .cfc-wrap   { margin: 64px auto; padding: 0 20px; }
  .cfc-inner  { padding-top: 34px; }
  .cfc-question { font-size: 1.26rem; }

  .cfc-textarea {
    font-size: 16px; /* iOS Safari の自動ズーム防止（ts-memory-popup.cssと同じ対策） */
  }
}