/* ノクティア 共通デザイントークン（2026-08-08 リデザイン v1）
 *
 * 仕様書: docs/design/noctia-redesign-spec.md
 * 参考: syncity.co.jp（漆黒×明朝×余白主導）／ yoru.design（画像ゼロの文字組）
 *
 * ■ 原則（変更するときは仕様書ごと更新すること）
 * 1. アクセント色を増やさない。階層は色数ではなく「白の透明度」と余白で作る。
 * 2. 本文まで明朝で通す。太字明朝(700)は品を落とすので使わない。
 * 3. 緑(#06C755)はLINE導線にだけ使う。
 * 4. 外部JSライブラリを読まない（Three.js/astronomy-engineは廃止済み）。
 */

:root {
  --bg: #07071a;
  --surface: #0d0d26;
  --veil-08: rgba(232, 228, 240, .08); /* 境界線 */
  --veil-04: rgba(232, 228, 240, .04); /* 面の微差 */
  --primary: #c8b4f0;
  --secondary: #9b6fd0;
  --text: #e8e4f0;
  --text-mute: rgba(232, 228, 240, .72);   /* WCAG AA 8.35:1（.50は4.48:1で不足だった） */
  --text-faint: rgba(232, 228, 240, .52);  /* WCAG AA 4.74:1（.32は2.45:1で読めなかった） */
  --line: #06C755;

  --font-serif: YakuHanMP, "Shippori Mincho B1", "Hiragino Mincho ProN W3",
                "游明朝", YuMincho, serif;
  --font-sans: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;

  --gap: 8px;
  --section: 64px;
  --maxw: 640px;
}
@media (min-width: 768px) { :root { --section: 96px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .01em;
  -webkit-text-size-adjust: 100%;
  background-image: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(155, 111, 208, .18), transparent 60%);
  background-attachment: fixed;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 96px; }

/* ── 文字組（明朝を本文まで通す。太字は使わない） ───────── */
h1, h2, h3 { font-weight: 500; letter-spacing: .02em; line-height: 1.5; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.15rem; }
@media (min-width: 768px) { h1 { font-size: 2.1rem; } }

/* ラベル・数字だけサンセリフに寄せる（明朝と混ぜない） */
.label {
  font-family: var(--font-sans);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lead { color: var(--text-mute); font-size: .95rem; white-space: pre-line; }
.note { color: var(--text-faint); font-size: .82rem; line-height: 1.8; }

/* ── 構造 ───────────────────────────────── */
header.site { padding: 22px 0 0; text-align: center; }
header.site a { color: var(--primary); text-decoration: none; font-family: var(--font-sans);
  font-size: .72rem; letter-spacing: .22em; }

section { margin-top: var(--section); }

hr.rule { border: 0; border-top: 1px solid var(--veil-08); margin: var(--section) 0 0; }

/* ── 入力フォーム（トップの主役。syncityの「主役1点」構図をここに翻訳） ── */
.form { margin-top: 32px; }
.form label { display: block; margin-bottom: 12px; }
.selects { display: flex; gap: var(--gap); }
.selects select {
  flex: 1; min-width: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--veil-08); border-radius: 10px;
  padding: 15px 8px; font-size: 1rem; font-family: var(--font-serif);
  text-align: center; -webkit-appearance: none; appearance: none;
}
.btn-primary {
  display: block; width: 100%; margin-top: 16px;
  background: transparent; color: var(--text);
  border: 1px solid var(--primary); border-radius: 10px;
  padding: 17px; font-size: 1.02rem; font-family: var(--font-serif);
  letter-spacing: .08em; cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.btn-primary:not(:disabled):hover { background: var(--primary); color: var(--bg); }

/* ── 結果 ───────────────────────────────── */
.result { margin-top: 40px; }
.res-line { font-size: 1.05rem; margin-bottom: 22px; }
.res-line strong { color: var(--primary); font-weight: 400; }
.result blockquote {
  border-left: 1px solid var(--secondary); padding-left: 16px;
  color: var(--text-mute); font-size: .95rem; margin-bottom: 8px;
}
.res-src { color: var(--text-faint); font-size: .78rem; margin-bottom: 24px; }
.res-gap { padding: 22px 0; border-top: 1px solid var(--veil-08); border-bottom: 1px solid var(--veil-08); }
.res-sum { font-size: 1.06rem; line-height: 1.9; margin-top: 24px; padding: 22px 18px;
  background: var(--veil-04); border-radius: 12px; }
.res-note { color: var(--text-faint); font-size: .82rem; margin-top: 18px; }
.res-note strong { color: var(--primary); font-weight: 400; }
.res-tail { color: var(--text-mute); font-size: .92rem; margin-top: 20px; }

/* ── CTA（緑はここだけ） ─────────────────────── */
.cta { margin-top: 32px; text-align: center; }
.cta p { white-space: pre-line; margin-bottom: 24px; }
.btn-line {
  display: block; background: var(--line); color: #fff; text-decoration: none;
  padding: 18px 20px; border-radius: 12px; font-size: 1.04rem; letter-spacing: .04em;
}

/* ── 下部固定CTAバー（改修1・2026-08-20） ───────────────────
   装置開始〜40秒は出さない（渇望の醸成期を守る）。40秒経過で静的#ctaを
   このスタイルに転用してフェードインし、装置を完走したら消す
   （結果内のclosing-ctaだけを残す＝二重表示の解消）。
   フェードのtransitionは、prefers-reduced-motionでは149行目の
   `* { transition: none !important }` により自動的に無効化される
   （このファイル内の既存の配慮に倣っている。ここで個別対応は不要）。 */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  margin: 0; padding: 13px 20px calc(13px + env(safe-area-inset-bottom, 0px));
  background: rgba(7, 7, 26, .94);
  border-top: 1px solid var(--veil-08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(100%);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.sticky-cta[hidden] { display: none !important; }
.sticky-cta.sticky-visible { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta .cta { margin-top: 0; }
/* 元の長い本文・注記はバーには長すぎるので畳む（消さない。販売再開等で
   静的表示に戻す可能性に備え、テキスト自体はHTML側に残したまま）。 */
.sticky-cta .cta > p:not(.sticky-label) { display: none; }
.sticky-cta .sticky-label {
  display: block; margin: 0 0 10px; text-align: center;
  color: var(--text-mute); font-size: .84rem; letter-spacing: .02em;
}
.sticky-cta .btn-line { padding: 13px 20px; font-size: .96rem; }

/* ── 12星座グリッド ───────────────────────── */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid a {
  display: block; text-align: center; padding: 18px 4px;
  background: var(--surface); border: 1px solid var(--veil-08); border-radius: 12px;
  color: var(--text); text-decoration: none; font-size: .92rem;
  transition: border-color .3s ease;
}
.grid a:hover { border-color: var(--secondary); }
.grid a small { display: block; font-family: var(--font-sans); color: var(--text-faint);
  font-size: .62rem; margin-top: 5px; letter-spacing: .04em; }
.grid a[aria-current] { border-color: var(--secondary); color: var(--primary); }
@media (max-width: 400px) { .grid { grid-template-columns: repeat(2, 1fr); } }

/* ── フッター ───────────────────────────── */
footer.site {
  margin-top: var(--section); padding-top: 28px; border-top: 1px solid var(--veil-08);
  text-align: center; font-size: .78rem; color: var(--text-faint); line-height: 2.2;
}
footer.site a { color: var(--text-mute); text-decoration: none; }
footer.site a:hover { color: var(--primary); }

/* ── スクロール出現（フェード＋8px上昇のみ。派手な演出はしない） ── */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

/* ── 取扱説明書ページ固有 ─────────────────────── */
.range { font-family: var(--font-sans); color: var(--text-faint); font-size: .7rem;
  letter-spacing: .08em; margin-bottom: 22px; }
section.card {
  background: var(--surface); border: 1px solid var(--veil-08); border-radius: 14px;
  padding: 24px 22px; margin: 0 0 16px;
}
section.card h2 {
  font-size: 1.05rem; color: var(--primary); margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--veil-08);
}
section.card ul { list-style: none; }
section.card li { position: relative; padding-left: 1.1em; margin-bottom: 13px; font-size: .97rem; }
section.card li::before { content: "・"; position: absolute; left: 0; color: var(--secondary); }
.closing { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--veil-08);
  color: var(--text-mute); font-size: .9rem; }
.pending { color: var(--text-faint); font-size: .92rem; text-align: center; padding: 6px 0; }
.pending strong { color: var(--primary); font-weight: 400; }
.navtitle { font-family: var(--font-sans); color: var(--text-faint); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; text-align: center; margin: 40px 0 16px; }
.follow { text-align: center; margin-top: 24px; }
.follow p { color: var(--text-mute); font-size: .88rem; margin-bottom: 14px; }
.follow a { display: inline-block; color: var(--primary); text-decoration: none; font-size: .92rem;
  border: 1px solid var(--veil-08); border-radius: 10px; padding: 13px 24px;
  transition: border-color .3s ease; }
.follow a:hover { border-color: var(--secondary); }

/* ── 読み解き体験 ─────────────────────────────
   自動で進む演出はやめた（読む速度は人によって違い、必ず誰かに速すぎるため）。
   待たせるのは計算中の一度だけ。結果は取り消し線が入った状態で一度に出し、
   あとはユーザーのペースで上から読ませる。 */
.intro { font-size: 1rem; margin-bottom: 8px; }
.intro span { display: block; color: var(--text-mute); font-size: .92rem; margin-top: 6px; }

/* 進行表示：画面下に貼り付けて視線の置き場を1箇所に固定する。
   文章が増えるたびに下へ流れていくと「どこを見ていればいいか」が分からなくなる。 */
.pending-bar[hidden] { display: none !important; }
/* 走行中は末尾に余白を確保する。これが無いと、新しい星を進行カードの直下へ送った
   とたん、下にあるページ自身のフッター（Threads導線・星座一覧）が画面に入り、
   まだ動いているのに「終わった」ように見える。終わったら外す。 */
.result.running { padding-bottom: 70vh; }
/* ⚠️ 画面"上"に固定する。本文は下に生えるので、下に置くと
   「動く場所」と「見る場所」が重なり、視線の置き場にならない（実際に失敗した）。 */
/* ⚠️ top は 0。8px でも空けると、その隙間から本文が覗いて壊れて見える。 */
.pending-bar {
  position: sticky; top: 0; z-index: 20;
  margin: 24px 0 8px; padding: 13px 16px 12px;
  background: rgba(13, 13, 38, .94);
  border: 1px solid rgba(200, 180, 255, .22); border-radius: 10px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  font-size: .9rem; line-height: 1.6; color: var(--text);
}
.pending-row { display: flex; align-items: center; gap: 10px; }
/* 実行中はスピナー、完了はチェック。状態が一目で分かるようにする。 */
.pending-mark { flex: none; width: 14px; height: 14px; display: inline-flex;
  align-items: center; justify-content: center; font-size: .8rem; color: var(--primary); }
.spin { width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid rgba(200,180,255,.25); border-top-color: var(--primary);
  animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pending-bar.step-done { border-color: rgba(200,180,255,.34); }
.pending-bar.step-done .pending-text { color: var(--text); }
/* ⚠️ 見出しは必ず1行に収める。折り返すとカードの高さが変わり、ぐんと動いて見える。 */
.pending-text { flex: 1; min-width: 0; color: var(--text-mute); transition: color .4s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pending-step {
  font-family: var(--font-sans); font-size: .7rem; letter-spacing: .1em;
  color: var(--primary); white-space: nowrap;
}
/* 実際の計算値（黄経など）。演出用の偽の数字は出さない。 */
/* ⚠️ 実行中は空になるが、場所は2行ぶん常に確保しておく。
   確定値が生えた瞬間にカードが伸びるのが「ぐんと変わる」の正体だった。 */
.calc-line {
  margin-top: 8px; font-family: var(--font-sans);
  font-size: .72rem; line-height: 1.5; min-height: 3em;
  letter-spacing: .04em; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.calc-line span { color: var(--text-faint); }

/* 工程ぶんのマスに区切ったメーター。
   ⚠️ マス幅は所要時間に比例させる（flex-grow をJSが実時間で入れる）。
      等幅にすると短い工程ほど速く流れて、進み方が雑に見える。 */
.seg-meter { margin-top: 10px; display: flex; gap: 3px; }
.seg-meter > i {
  display: block; height: 3px; border-radius: 2px; flex-basis: 0;
  background: rgba(232, 228, 240, .12); overflow: hidden;
}
.seg-meter > i > b {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--secondary), var(--primary));
}
/* いま進んでいるマスは呼吸させる。本文が静かな時間帯でも、
   装置が生きていることが伝わるように（reduced-motionでは止まる）。 */
.seg-meter > i > b.on { animation: breath 2s ease-in-out infinite; }
@keyframes breath { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── 章立て（最終的にどこに何が書いてあるかを分かるようにする） ── */
.step { margin: 40px 0 20px; }
.step-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--primary);
  font-size: 1.02rem; color: var(--text);
}
.step-head em {
  font-style: normal; font-family: var(--font-sans);
  font-size: .62rem; letter-spacing: .16em; color: var(--primary);
  border: 1px solid rgba(200,180,255,.35); border-radius: 99px; padding: 3px 9px;
  flex: none;
}

/* 予告（急に画面が変わらないように） */
.forecast {
  margin-top: 14px; font-size: .95rem; line-height: 1.85; color: var(--text-mute);
}
.forecast strong { color: var(--text); font-weight: 400; }
.forecast span { display: block; margin-top: 6px; color: var(--text-faint); font-size: .86rem; }

.star-find em {
  font-style: normal; font-family: var(--font-sans); font-size: .68rem;
  letter-spacing: .1em; color: var(--text-faint); margin-left: 10px;
}

.step-label {
  font-family: var(--font-sans); font-size: .68rem; letter-spacing: .14em;
  color: var(--text-faint); text-transform: uppercase; margin-bottom: 16px;
}
.step-label.mt { margin-top: 40px; }

.sun-list { list-style: none; margin-bottom: 24px; }
.sun-list li {
  position: relative; padding-left: 1.1em; margin-bottom: 14px; font-size: .97rem;
  /* 線は最初から引いておき、色だけ透明にしておく。text-decoration の有無そのものは
     アニメーションできないので、こうしないと線がフェードで入らない。 */
  text-decoration: line-through; text-decoration-color: transparent;
  text-decoration-thickness: 1px;
}
.sun-list li::before { content: "・"; position: absolute; left: 0; color: var(--secondary); }
/* 1行ずつ点灯させる。場所は最初から確保してあるので、リストは伸び縮みしない。 */
.sun-list li.pend { opacity: 0; }
.sun-list li.lit { opacity: 1; }
/* ghost＝見えないが場所を取る本体。type＝その上に1文字ずつ重ねる層。
   ⚠️ 文字を消してから打ち直す方式なので、場所を取る側を残さないと行が縮む。 */
.sun-list li .ghost { visibility: hidden; }
/* ⚠️ text-decoration は絶対配置の子孫には伝播しない（CSSの仕様）。
   li に線を付けても .type には出ないので、ここで直接指定する。 */
.sun-list li .type {
  position: absolute; left: 1.1em; right: 0; top: 0;
  text-decoration: line-through; text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  transition: color 1.6s ease, text-decoration-color 1.6s ease;
}
.sun-list li.struck .type { text-decoration-color: var(--primary); }
/* 装置が否定した項目。引用カード・結果内リスト・ページ上部の取説の3か所に効かせる。 */
.sun-list li.struck,
.quote-text.struck,
section.card .card-list li.struck {
  color: rgba(232, 228, 240, .60); /* 6.04:1。opacityで薄めると1.50:1まで落ちて読めなくなる */
  text-decoration: line-through;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1px;
}

.divider-note {
  margin: 18px 0 0; padding: 13px 0;
  border-top: 1px solid var(--veil-08); border-bottom: 1px solid var(--veil-08);
  color: var(--text-mute); font-size: .92rem; text-align: center;
}
/* ブロックは行ごとに順次出す。まとめてパッと出ると、どれだけ出るのか掴めない。
   ⚠️ 1文字ずつ出す要素（.typed）はフェードさせない。二重の演出になって遅く見える。 */
.typed, .star-block > .typed { opacity: 1; animation: none; }
.star-block > * { opacity: 0; animation: lineIn .55s ease-out forwards; }
.star-block > *:nth-child(1) { animation-delay: 0s; }
.star-block > *:nth-child(2) { animation-delay: .28s; }
.star-block > *:nth-child(3) { animation-delay: .56s; }
.star-block > *:nth-child(4) { animation-delay: .84s; }
.star-block > *:nth-child(5) { animation-delay: 1.12s; }
.step > * { opacity: 0; animation: lineIn .55s ease-out forwards; }
.step > *:nth-child(2) { animation-delay: .3s; }
@keyframes lineIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* 上部リストの線はゆっくり入れる（目の前の引用に引く線と速さを揃える） */
.sun-list li { transition: opacity .5s ease, color 1.6s ease, text-decoration-color 1.6s ease; }
/* 1文字ずつ出す要素は、足した瞬間から出しはじめる（並び順の遅延を持ち越さない） */
.star-block > .star-truth,
.star-block > .quote-card,
.star-block > .star-quote { animation-delay: 0s; }

.verdict {
  padding: 18px 0; border-top: 1px solid var(--veil-08); border-bottom: 1px solid var(--veil-08);
  font-size: 1.02rem;
}
.verdict strong { color: var(--primary); font-weight: 400; }
.verdict span { color: var(--text-mute); font-size: .92rem; }

.sun-row { font-size: 1.02rem; margin-bottom: 8px; }
.sun-row strong { color: var(--primary); font-weight: 400; }
.sun-row span { display: block; color: var(--text-mute); font-size: .88rem; margin-top: 4px; }

.star-block { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--veil-08); }
.star-block.sun-block { border-top: 0; padding-top: 0; }
.star-find { font-size: 1.02rem; }
.star-find strong { color: var(--primary); font-weight: 400; }
.star-quote { margin-top: 10px; padding-left: 16px; border-left: 1px solid var(--veil-08);
  color: var(--text-mute); font-size: .93rem; }
.star-quote span { color: var(--text-faint); font-size: .84rem; }
.star-truth { margin-top: 12px; padding: 15px 16px; background: var(--veil-04);
  border-radius: 10px; font-size: 1rem; line-height: 1.85; }

/* 否定する一文は、否定する直前にここへ引用する。目の前で線が入るのが見せ場。
   ⚠️ 左から右へ線を走らせる演出は、2行に折り返した時点で成立しない。
      多行でも破綻しないよう、線そのものを淡く入れる形にしてある。 */
.quote-card {
  margin-top: 12px; padding: 14px 16px;
  border-left: 2px solid var(--secondary); border-radius: 0 10px 10px 0;
  background: var(--veil-04);
}
.quote-text {
  font-size: .97rem; line-height: 1.85; color: var(--text);
  text-decoration: line-through; text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  transition: color .8s ease, text-decoration-color .8s ease;
}
.truth-lead { display: block; margin-bottom: 6px; font-family: var(--font-sans);
  font-size: .74rem; letter-spacing: .08em; color: var(--text-faint); }

/* 読み返しの余白の間に、次の予告を薄くゆっくり打つ行。
   視界の端で「続きがある」ことを伝えるためのもので、目立たせない。 */
.next-note { margin-top: 18px; font-family: var(--font-sans);
  font-size: .74rem; letter-spacing: .1em; color: var(--text-faint); }

/* 結びの段階表示。1つずつ言い切って進めるためのフェード。 */
.seq { opacity: 0; transform: translateY(6px);
  transition: opacity .7s ease-out, transform .7s ease-out; }
.seq.in { opacity: 1; transform: none; }

/* 打ち消しは1文字ずつ引く。1文字ごとの線が隣と繋がるので、折り返しても破綻しない。 */
.quote-text .ch { transition: color .25s ease; }
.quote-text .struck-ch {
  color: rgba(232, 228, 240, .60);
  text-decoration: line-through;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1px;
}

/* STEP3：書き換わったあとの取扱説明書と、消さなかった項目の扱い。 */
.rewrite-head { margin-bottom: 14px; font-family: var(--font-sans); font-size: .72rem;
  letter-spacing: .12em; color: var(--primary); }
.sun-list.rewrite { margin-bottom: 20px; }
.kept-note { margin-top: 14px; font-size: .9rem; line-height: 1.85; color: var(--text-mute); }

.done-head {
  color: var(--primary); font-size: 1rem; margin-bottom: 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--veil-08);
}
.closing-block { margin-top: 4px; }
.combo { padding: 20px 18px; background: var(--veil-04); border-radius: 12px;
  font-size: .98rem; text-align: center; }
.combo strong { color: var(--primary); font-weight: 400; font-size: 1.15rem; }

/* 装置の結果末尾のCTA。装置は「当たっていない項目を消す」＝否定で終わるので、
   ここは肯定形の答え（LINEの鑑定）への受け渡し。ページ上部の .cta と重複して見えるが、
   90秒読み切った人がスクロールし直さずに押せることを優先する。
   色は --text-mute（実測8.35:1）まで。faint（4.74:1）はここでは使わない。 */
.closing-cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--veil-08); }
.cta-lead { font-size: 1rem; line-height: 1.9; }
.cta-lead strong { color: var(--primary); font-weight: 400; }
.cta-sub { color: var(--text-mute); font-size: .9rem; margin: 10px 0 20px; }
.closing-cta .btn-line { text-align: center; }

/* 未入力のあいだ最初に目に入るボタンなので、読めなくならない濃さにする（.4は薄すぎた） */
#go:disabled { opacity: .55; cursor: default; }