/* ============================================================
   subject-dossier-cta.css — Quest → Subject Dossier link
   Path: /css/subject-dossier-cta.css

   Quest記事から Subject Dossier へ渡すリンク1つ分のスタイル。
   共通CSS（style.css / multilingual.css）には手を入れていない。

   【なぜカードにしないか】
   記事末尾には既に clue-footer-cta（Your Trail）と
   quest-found-cta が並ぶ。そこへ塗り＋枠のカードを足すと、
   枠付きブロックが連続して広告的に見える。
   記事末尾セクションの既存パターン——max-width 640px・中央揃え・
   上部ヘアラインのみ・塗りなし（.cfc-wrap / .cfc-inner）——に
   合わせ、記事の一部として静かに読めることを優先している。
   クリック領域は塗りではなく padding で確保する。
   ============================================================ */

.sdc-wrap {
  max-width: 640px;
  margin: 96px auto 0;
  padding: 0 24px;
}

/* ブロック全体を1つのリンクにして、クリック領域を確保する。
   デスクトップ・モバイルとも、どの行を押しても飛ぶ。 */
.sdc-link {
  display: block;
  padding: 46px 8px 8px;
  border-top: 1px solid rgba(201, 168, 76, 0.18);
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.sdc-link:hover { opacity: 0.82; }
.sdc-link:focus-visible {
  outline: 1px solid var(--accent, #c9a84c);
  outline-offset: 4px;
}

.sdc-label {
  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(--accent, #c9a84c);
  opacity: 0.85;
  margin-bottom: 18px;
}

.sdc-name {
  display: block;
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text, rgb(240 236 228));
  margin-bottom: 10px;
}

.sdc-count {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 236, 228, 0.4);
  margin-bottom: 22px;
}

.sdc-action {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  padding-bottom: 4px;
}
.sdc-link:hover .sdc-action {
  color: #d9b85c;
  border-bottom-color: #d9b85c;
}

/* ── Mobile ─────────────────────────────────────────────── */

@media (max-width: 640px) {
  .sdc-wrap { margin-top: 72px; }
  .sdc-link { padding: 38px 8px 8px; }
  .sdc-name { margin-bottom: 12px; }
  .sdc-count { margin-bottom: 20px; }
  /* タップ領域を確保する（行の高さだけに依存させない） */
  .sdc-action { padding: 6px 4px 8px; }
}