/*
 * 脈あり・好意分析のページ固有スタイル。
 *
 * **土台は ../renai_numa/styles.css を共有する。**
 * 色・カード・ボタン・選択肢・進捗バーはすべてあちらの定義を使い、
 * ここには販売ページと不通過画面のためのものだけを置く。
 * 世界観を揃えるためと、17KBのCSSを二重に持たないため。
 */

/*
 * ---- 共有CSSとの食い違いを1か所で直す ----
 *
 * あちらの `.not-uranai` と `.intro-text` は **`white-space: pre-line`** で改行を出す。
 * **JSが textContent に文字列を入れる前提**だからだ（沼診断はそうしている）。
 *
 * **こちらはPHPが `<br>` を書く。** `md_h()` の `nl2br()` も同じ。
 * すると `<br>` と元の改行の両方が効いて、**行間が2行ぶん開く。**
 * 2026-08-09に本人が指摘した「行間が開きすぎている」がこれ。
 *
 * **このファイルは脈あり・好意分析の4ページしか読み込まない**ので、
 * ここで上書きしても沼診断側は影響を受けない。
 */
.not-uranai,
.intro-text {
  white-space: normal;
}

/* ---- 販売ページ ---- */

/* **「脈」の定義は赤枠で囲う**（2026-08-14・本人指示）。
   この商品は「脈」を普通の意味から狭めて売っている。
   **その断りが地の文に紛れていると、狭めたことに気づかれないまま買われる。** */
.sales-lead {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--red-strong);
  border-radius: 10px;
  background: rgba(225, 29, 72, 0.07);
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 0.02em;
}

.sales-heading {
  margin: 2rem 0 0.8rem;
  font-size: 1rem;
  color: var(--text);
  border-left: 3px solid var(--red-strong);
  padding-left: 0.6rem;
  letter-spacing: 0.04em;
}

.sales-list {
  margin: 0;
  line-height: 1.9;
}

.sales-list strong {
  color: var(--gold);
}

.sales-note {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  line-height: 1.85;
}

.sales-note p {
  margin: 0 0 0.8rem;
}

.sales-note p:last-child {
  margin-bottom: 0;
}

/*
 * 「まずは5問。ここは無料だ」の枠。
 *
 * **買った後の話（.sales-note）とは別の枠にしてある。**
 * 同じ枠に入れると990円の話の続きに見えて、無料で終わることが伝わらない。
 * 赤枠にしているのは、購入ボタンの直前で**いちばん読ませたい一文**だから
 * （2026-08-07・本人指示。強調の仕方は任された）。
 */
.sales-gate-note {
  margin: 1rem 0 0;
  padding: 1.1rem 1.2rem;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid var(--red-strong);
  border-radius: 12px;
  line-height: 1.85;
}

.sales-gate-note p {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

.sales-gate-note p:last-child {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.sales-gate-note strong {
  color: var(--gold);
}

/* ---- 購入前チェック ---- */

/* 「（目が合った・すれ違った、は含めない）」のような但し書き */
.check-note {
  margin: -0.4rem 0 1rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---- 不通過の画面 ---- */

.blocked-body {
  margin: 0.6rem 0 1.4rem;
}

.blocked-line {
  margin: 0 0 0.9rem;
  line-height: 1.95;
  font-size: 1rem;
}

.blocked-line:empty {
  margin: 0;
  height: 0.4rem;
}

.blocked-line strong {
  color: var(--gold);
}

/* 無料2診断への案内。**交際中の画面にしか出ない** */
.blocked-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.blocked-links:empty {
  display: none;
}

/* 「最初から見直す」。**3画面すべてに出す**（無料2診断への案内は交際中だけ） */
#screen-blocked .nav-row {
  margin-top: 1.4rem;
}

/* ---- 設問画面（analyze.php） ---- */

/*
 * **hidden を効かせる。** 土台のCSSはボタンに display を指定しているので、
 * これが無いと hidden を付けたボタンがそのまま出続ける
 */
[hidden] {
  display: none !important;
}

/* テストモードの取引であることを知らせる帯。本番では出ない */
.myakuari-test-banner {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1.5px solid var(--red-strong);
  border-radius: 12px;
  background: rgba(225, 29, 72, 0.12);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.intro-list {
  margin: 1.4rem 0;
  line-height: 1.9;
  text-align: left;
}

.intro-list strong {
  color: var(--gold);
}

/* 前回の続きがあるときだけ出る案内 */
.intro-resume {
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.intro-resume-text {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.intro-resume-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* **URLが入場券であることの断り書き。** 失うと入り直せないので目立たせる */
.ticket-note {
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-muted);
  text-align: left;
}

.ticket-note strong {
  color: var(--text);
}

/* いまどの軸を聞いているか */
.q-axis {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--gold);
}

/* localStorage が使えない端末にだけ出る */
/*
 * 任意1だけに出る案内とリンク（2026-08-09）。
 * **ここで初めて「恋愛沼らせ診断」の名前が出る**ので、何なのかを説明してから出す。
 * 設問中にリンクを置かない規則の唯一の例外——37問を答え終えた後ろだから許される
 */
.q-note {
  margin: 0 0 1.2rem;
  padding: 0.85rem 1rem;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.8;
}

.q-note p {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
}

.q-note-link {
  color: var(--gold);
  text-decoration: underline;
}

.q-storage-note {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/*
 * **設問中は画面下のリンクを隠す**（仕様書2章）。
 * 任意1で別の診断に触れるため、離脱の経路そのものを作らない方針に合わせる
 */
body.in-questions .site-footer {
  display: none;
}

/*
 * ---- 「読み解いている」の演出（2026-08-09） ----
 *
 * **回るだけの丸にしない。** 数えている軸の名前を順に灯す。
 * 5軸で見るという売り文句を、待っている5秒でもう一度見せられる。
 */

.analyzing-card {
  text-align: center;
}

.analyzing-ring {
  width: 54px;
  height: 54px;
  margin: 1.6rem auto 1.4rem;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-right-color: var(--red-strong);
  animation: analyzing-spin 1.1s linear infinite;
}

@keyframes analyzing-spin {
  to {
    transform: rotate(360deg);
  }
}

.analyzing-steps {
  margin: 0 auto;
  max-width: 19rem;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.6;
}

.analyzing-steps li {
  margin: 0 0 0.55rem;
  padding-left: 1.5rem;
  position: relative;
  color: var(--text-muted);
  opacity: 0.45;
  transition: opacity 0.35s ease, color 0.35s ease;
}

/* 数え終わった軸。**印を「…」から「✓」へ替える**ので、進んだことが分かる */
.analyzing-steps li::before {
  content: "…";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.analyzing-steps li.done {
  opacity: 1;
  color: var(--gold);
}

.analyzing-steps li.done::before {
  content: "✓";
  color: var(--gold);
}

.analyzing-note {
  margin: 1.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/*
 * **動きを減らす設定の端末では回さない。** 待ち時間そのものは残す——
 * 灯っていく文字で進んでいることは伝わるので、演出の役目は果たせる
 */
@media (prefers-reduced-motion: reduce) {
  .analyzing-ring {
    animation: none;
  }
}

/* ---- 結果画面（result.php） ---- */

.result-card {
  text-align: left;
}

/*
 * シェア禁止のひとこと（5章⓪-2・2026-08-08）。**タイトルの直下に出す。**
 * 「これは占いではない」より前なので、あちらより強く見せる——
 * この画面には相手の行動を採点した中身が並んでいて、**見せた時点で戻せない。**
 */
.no-share {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--red-strong);
  border-radius: 12px;
  background: rgba(225, 29, 72, 0.08);
  font-size: 0.9rem;
  line-height: 1.85;
}

.no-share strong {
  color: var(--gold);
}

.result-card .not-uranai {
  margin: 1.4rem 0 1.6rem;
}

.result-block {
  margin: 0 0 2.2rem;
}

.result-heading {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--text);
  border-left: 3px solid var(--red-strong);
  padding-left: 0.6rem;
}

.result-body {
  margin: 0 0 1rem;
  line-height: 1.95;
}

.result-body strong {
  color: var(--gold);
}

/*
 * ★ 先に答える（2026-08-12追加・仕様書5章）。**この画面の一行目。**
 *
 * 買った人の問いは「脈はあるのか」で、それまで答え（型）は全体の55%を過ぎるまで
 * 出てこなかった。**枠で囲って、読み飛ばせない位置に置く。**
 *
 * 定義文は本文より小さく、答えは本文より大きい。**定義は前置きで、答えが主役。**
 */
.verdict-block {
  padding: 1.2rem 1.2rem 0.6rem;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.06);
}

.verdict-block .result-heading {
  border-left: none;
  padding-left: 0;
  color: var(--gold);
}

.verdict-def {
  font-size: 0.88rem;
  line-height: 1.9;
  opacity: 0.86;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.verdict-answer {
  font-size: 1.05rem;
  line-height: 1.95;
}

/* ★-2 なぜそう言えるのか。**答えの根拠を3本。新しい文章は書いていない** */

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

.evidence-item {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  margin: 0 0 0.9rem;
  line-height: 1.9;
}

.evidence-item:last-child {
  margin-bottom: 0;
}

.evidence-axis {
  flex: 0 0 auto;
  min-width: 2.6em;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

/*
 * 境界フラグ。**型より先に出す。**
 * 行動のスコアで、相手が口に出した答えを上書きさせないため（仕様書8章）
 */
.boundary-block {
  padding: 1.1rem 1.2rem;
  border: 1.5px solid var(--red-strong);
  border-radius: 12px;
  background: rgba(225, 29, 72, 0.08);
}

.boundary-block .result-heading {
  border-left: none;
  padding-left: 0;
}

/* ① お前が集めた分析材料 */

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

.axis-score {
  margin: 0 0 1.1rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}

.axis-score:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.axis-score-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.axis-score-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.axis-score-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.axis-score-value {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.95rem;
}

.axis-score-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* **判定不能の軸。** 段階を割り当てず、解説も出さない（仕様書4章） */
.axis-score.undetermined .axis-score-name {
  color: var(--text-muted);
}

.axis-score.undetermined .axis-score-value {
  color: var(--text-muted);
}

/*
 * メーターの目盛り（2026-08-08・本人指示）。
 * **`.axis-bar` 自体は無料診断と共有している**ので、`.axis-score` で囲って
 * こちらの画面だけに効かせる。触ると恋愛沼診断の軸バーまで変わる。
 */
.axis-score .axis-bar {
  position: relative;
}

/* 7等分の区切り線。バーの内側に描くので overflow: hidden のままでよい */
.axis-score .axis-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% / 7 - 1px),
    rgba(0, 0, 0, 0.5) calc(100% / 7 - 1px),
    rgba(0, 0, 0, 0.5) calc(100% / 7)
  );
}

.axis-scale {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* いまの段階だけ光らせる。**数字を探させない** */
.axis-scale .on {
  color: var(--gold);
  font-weight: 800;
}

/* ② 軸ごとの読み取り */

.axis-read {
  margin: 0 0 1.8rem;
}

.axis-read-name {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.08em;
}

.axis-read-stage {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0;
}

/*
 * 7問ぶんの部品を束ねた生成文（仕様書9章）。
 * **固定文が言えるのは帯だけ**なので、具体的な中身はここが担う。
 * **引用リストの置き換えなので、リストに見せない。**
 * 見出しの言葉は小さく、本文は段落として読ませる
 */
.axis-prose {
  margin-top: 1rem;
}

.prose-lead {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.9rem;
  color: var(--gold);
}

.axis-prose .prose-lead:first-child {
  margin-top: 0;
}

.prose-body {
  margin: 0;
  line-height: 1.95;
}

/* 見出しを持たない段落（答えの出ていない項目の数・読み取りの上限）。
   **直前の群の続きに見せない。** つなぎを見出しの形にしたので、
   線で切らないと最後の群の一部として読まれる（2026-08-12） */
.prose-note {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

/* ③ お前たちの形 */

.type-label {
  margin: 0 0 0.9rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -0.02em;
}

/* 境界フラグが立ったときは、型名を見出しに出さず参考表示へ格下げする（8章） */
.type-label-demoted {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ④「悪魔の見立て：別の説明もつく」（5章の見出し表）。
   **③の中の小見出しにする。** 大見出しで独立させると、型の見立てと切り離されて
   「結局どっちなんだ」で読者が止まる。判定を薄める欄ではないので、
   **本文より一段控えめに見せる**（枠で囲って、地の文とは別のものだと分かる程度） */
.result-subheading {
  margin: 1.6rem 0 0.7rem;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--gold);
}

.alt-reading {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
}

/* 境界フラグのとき、型の本文の前に置く前置き（8章）。
   **本文と地続きに見せない。** 枠の外の話ではない、と断るのがこの一段の役目 */
.boundary-type-lead {
  margin: 0 0 1.1rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--border);
}

.partner-name {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
}

/* ⑦ 会うときの安全注意 */
.safety-block {
  padding: 1rem 1.1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.safety-block .result-heading {
  border-left: none;
  padding-left: 0;
  font-size: 0.95rem;
}

.safety-block .result-body {
  margin-bottom: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ＋ お前の回答（折りたたみ） */

.answers-block {
  margin: 0 0 1.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.answers-summary {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
}

.answer-group {
  margin: 1.2rem 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.answer-list {
  margin: 0;
  padding-left: 1.2rem;
}

.answer-item {
  margin: 0 0 0.7rem;
  font-size: 0.84rem;
  line-height: 1.7;
}

.answer-question {
  display: block;
  color: var(--text-muted);
}

.answer-value {
  display: block;
  color: var(--text);
  font-weight: 700;
}

/*
 * **「分からない」を目立たせる。**
 * 型F-1・F-2の「お前の回答を開いて確認しろ」という指示が、ここに依存している
 */
.answer-unknown .answer-value {
  color: var(--red-strong);
}

.answer-flag {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--red-strong);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--red-strong);
}

.result-footnote {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--text-muted);
}

/* URLを失った人の逃げ道。**「戻るURL」のボタンより後ろに置く**ので、
   間を空けて、控えめに見せる（先に押してほしいのはボタンのほう） */
.recover-note {
  margin-top: 1.2rem;
}

.result-until {
  display: block;
  margin-top: 0.3rem;
}

/* ---- サーバーが描く一言画面（page.php） ---- */

.notice-heading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  line-height: 1.6;
}

.notice-body {
  margin: 0 0 1.4rem;
  line-height: 1.9;
  color: var(--text-muted);
}

.notice-link {
  display: block;
  margin-top: 0.6rem;
  text-align: center;
}