/* ============================================================
   有料版(完全版診断)の追加スタイル
   ・世界観・トークンは styles.css の :root をそのまま使う(色や余白を新しく定義しない)
   ・**有料ページ / 有料導線が出るページからしか読み込まれない**。
     PAID_ENABLED=false のあいだ、無料の結果ページはこのファイルを読み込まない
   ============================================================ */

/* ---------- 文章ページ共通(説明・特商法・診断画面)---------- */
.screen-doc .hero{ margin-bottom: var(--sp-6); }

.doc-title{
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 var(--sp-6);
}

.doc-list{ margin: 0 0 var(--sp-6); }
.doc-list dt{
  font-size: 13px;
  font-weight: 600;
  color: var(--violet-deep);
  margin-top: var(--sp-5);
}
.doc-list dd{
  margin: var(--sp-2) 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary);
}

.doc-points{ margin: 0; padding: 0; list-style: none; }
.doc-points li{
  position: relative;
  padding-left: 1.1em;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary);
}
.doc-points li + li{ margin-top: var(--sp-3); }
.doc-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
}
.doc-points strong{ color: var(--text-primary); font-weight: 600; }

.doc-links{
  margin: var(--sp-5) 0 0;
  text-align: center;
  font-size: 13px;
}

/* ---------- 価格 ---------- */
.price-block{
  margin: var(--sp-6) 0 var(--sp-5);
  text-align: center;
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.price-amount{
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.3;
  color: var(--text-primary);
}
.price-amount span{
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ---------- 入力フォーム ---------- */
.field-group{ margin-bottom: var(--sp-6); }
.field-title{
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--sp-2);
}
.field-help{
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-3);
}
.char-row{
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.char-row input{ flex: 1 1 0; min-width: 0; }

/* 入力欄の輪郭は無料側と同じ床(--control-border = 非テキスト3:1)に揃える。
   デザイン検収 2026-08-16 で無料側を直したので、露出前にこちらも同じにしておく */
.screen-doc input[type="text"],
.screen-doc textarea{
  width: 100%;
  border: 1.5px solid var(--control-border);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-primary);
  transition: border-color var(--dur-base) var(--ease-out);
}
.screen-doc input[type="text"]::placeholder,
.screen-doc textarea::placeholder{ color: var(--text-weak); }
.screen-doc input[type="text"]:focus,
.screen-doc textarea:focus{ outline: none; border-color: var(--navy); }
.screen-doc textarea{ resize: vertical; min-height: 120px; }

/* ---------- 判別質問(無料側の .choice をそのまま使う)---------- */
.paid-question + .paid-question{ margin-top: var(--sp-7); }
.paid-question .q-title{ margin-bottom: var(--sp-4); }
.paid-question .q-note{
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin: 0 0 var(--sp-4);
}

/* ---------- 進行中・エラー ---------- */
.paid-status{
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-secondary);
  padding: var(--sp-8) 0;
}
.paid-status.is-working::after{
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  margin: var(--sp-5) auto 0;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--violet);
  animation: paid-spin 900ms linear infinite;
}
@keyframes paid-spin{ to{ transform: rotate(360deg); } }

.paid-keep{
  margin-top: var(--sp-6);
  font-size: 12px;
  line-height: 1.9;
  color: var(--text-secondary);
  text-align: center;
}
.paid-keep-url{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- 無料の結果ページ末尾に出る導線 ---------- */
/* PLACEHOLDER: 導線コピー選択待ち(文言は build-data.mjs の PAID_CTA 側) */
.paid-cta{
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  background: var(--violet-wash);
  border-radius: var(--r-lg);
}
/* 導線の見出し(判断⑧ 案1)。読みカードの h2 と同じ体裁にして、
   結果ページを読み終えた声の続きに見えるようにする(別の売り文句の顔をさせない) */
.paid-cta-title{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0 0 var(--sp-3);
}
.paid-cta-title .ripple-mark{ margin-top: 4px; flex: none; }

.paid-cta-label{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--violet-deep);
  margin-bottom: var(--sp-3);
}
.paid-cta-body{
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-secondary);
  margin-bottom: var(--sp-5);
}

/* ---------- 実例サンプル(有料説明ページ)---------- */
/* 読みそのものは本物の結果ページと同じ体裁(.read-blocks / .read-card)を使い回す。
   囲みの側だけ「これは見本である」と分かる控えめな枠にして、ページ自身の主張と混ざらないようにする。
   見出しは h3(ページのh1・カードのh2の下)だが、体裁は .read-card h2 と揃える */
.sample{
  margin: 0 0 var(--sp-6);
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--border-soft);
}
.sample-label{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--violet-deep);
  margin: 0 0 var(--sp-3);
}
.sample-note{
  font-size: 13px;
  line-height: 1.85;
  /* 読ませる弱いテキストなので --text-weak(4.82:1)。--text-tertiary は 2.8:1 で AA を満たさない */
  color: var(--text-weak);
  margin: 0 0 var(--sp-5);
}
.sample-title{
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  text-wrap: balance;
  margin: 0 0 var(--sp-3);
}
.sample-lead{
  font-size: 14.5px;
  line-height: 1.85;
  text-wrap: pretty;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}
.sample .read-card h3{
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 var(--sp-3);
}
.sample-foot{
  font-size: 13px;
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}

/* ---------- デスクトップ ---------- */
/* 有料側のページは全部「中央の1本」(styles.css の .screen-narrow を付けてある)。
   結果ページに差し込む導線だけは、締め・感想・シェアと同じ本文カラム幅に揃える */
@media (min-width: 1000px){
  .paid-cta{
    max-width: 560px;
    margin-inline: auto;
    padding: var(--sp-6);
  }
  .doc-title{ font-size: 28px; }
  .price-amount{ font-size: 36px; }
  .field-title{ font-size: 16.5px; }
  .screen-doc input[type="text"],
  .screen-doc textarea{ font-size: 16px; }
}

@media (prefers-reduced-motion: reduce){
  .paid-status.is-working::after{ animation: none; }
}