/* ==============================================================
   資産のこよみ（rogo-hasan）— サイト固有スキン
   アートディレクション: 減衰していくタイムライン。静かで淡い、余白の多い設計。
   恐怖を煽らないトーンを配色とタイポグラフィの両方で担保する。
   ============================================================== */

:root {
  --bg: #f7f5f6; /* 紙のような、ごくわずかに紫を含んだ温白 */
  --ink: #2b2430; /* 純黒を避けた深いすみれ墨 */
  --ink-mute: #8d8290;
  --accent: #6b4b6b; /* 薄墨紫 */
  --accent-2: #a99aa8; /* サブ・淡いすみれ */
  --accent-ink: #f7f5f6; /* accent上の文字色 */
  --rule: #e3dce2;
  --surface: #efe9ec;
  --radius: 3px;
  --gutter: 16px;
  --max-width: 480px;
  --transition-fast: 260ms cubic-bezier(0.4, 0, 0.2, 1); /* 静かに・ゆっくり */
  --font-serif:
    "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "Noto Serif JP", serif;
  --font-sans: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1820;
    --ink: #ece7ea;
    --ink-mute: #9d93a0;
    --accent: #b79bb7;
    --accent-2: #6f5f6f;
    --accent-ink: #241f28;
    --rule: #33303a;
    --surface: #262230;
  }
}

body {
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  /* 背景テクスチャ（512pxシームレスタイル・霞んだ和紙）。
     素材自体がほぼ無地だが、可読性最優先で --bg に近い白の半透明レイヤーを
     さらに重ねて沈める。「静かで淡い」が身上のため、主張させないことを優先する。 */
  background-image:
    linear-gradient(rgba(247, 245, 246, 0.55), rgba(247, 245, 246, 0.55)),
    url("img/bg-texture.webp");
  background-repeat: no-repeat, repeat;
  background-size:
    cover,
    512px 512px;
}

/* ダークモードでは紙のテクスチャが浮いて見えるため外す */
@media (prefers-color-scheme: dark) {
  body {
    background-image: none;
  }
}

/* -------- イントロ画面 -------- */
.intro {
  padding-top: 12vh;
  text-align: center;
}

.intro-duration {
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.intro-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.5;
}

.intro-catch {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--ink-mute);
}

.intro-lead {
  font-size: 0.85rem;
}

.btn-primary {
  border-radius: var(--radius);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.btn-secondary {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.88rem;
}

/* -------- 設問画面 -------- */
.question-label {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  line-height: 1.6;
}

.choice-btn,
.multi-item,
.select-input,
.number-input-wrap input,
input[type="text"],
input[type="email"] {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.choice-btn:hover,
.choice-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
}

/* -------- 結果画面 -------- */
.result-headline {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.result-score {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 14vw, 4.2rem);
  font-weight: 500;
}

.result-percentile {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-mute);
}

.result-badge {
  width: 2em;
  height: 2em;
  font-family: var(--font-serif);
}

/* サイト固有可視化（age-curveの土台。実描画はresult-view.jsのSVG） */
.result-visual {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 0;
}

.age-curve-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.age-curve-svg .curve-axis {
  stroke: var(--rule);
  stroke-width: 1;
}

.age-curve-svg .curve-tick {
  stroke: var(--rule);
  stroke-width: 1;
}

.age-curve-svg .curve-tick-label {
  fill: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 9px;
  font-feature-settings: "tnum";
}

.age-curve-svg .curve-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
}

.age-curve-svg .curve-line-fade {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
}

.age-curve-svg .curve-guide {
  stroke: var(--accent-2);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.age-curve-svg .curve-dot {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
}

.age-curve-svg .curve-dot-label {
  fill: var(--ink);
  font-family: var(--font-serif);
  font-size: 12px;
  text-anchor: middle;
}

.age-curve-svg .curve-caption {
  fill: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 10px;
  text-anchor: middle;
}

.teaser {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

.share-btn {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 0.85rem;
}

.lead-form {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* -------- フッター -------- */
.operator-footer {
  font-size: 0.78rem;
}