/* 機会損失カルテ — デザインシステム
   案A クリムゾン×アイボリー（トークンは markup.test.js が値を固定している。変更不可）
   2026-08-16: PC（デスクトップ）閲覧を前提としたレイアウトへ全面改訂。
   モバイルは 900px 以下で1カラムに折り返すフォールバックとして維持する。 */

:root {
  /* ---- 確定トークン（markup.test.js で値を固定。勝手に変えないこと） ---- */
  --color-bg: #FAF8F5;
  --color-ink: #1D1D1F;
  --color-primary: #B91C2E;
  --color-danger: #D90429;
  --color-praise: #B98A2E;
  --color-line: #06C755;
  --color-muted: #6E6E73;

  /* ---- 上記から派生させた拡張トークン（面で使う深紅・金・罫線） ---- */
  --color-crimson-deep: #6B0F1D;
  --color-crimson-dark: #8E1526;
  --color-gold: #C9A227;
  --color-paper: #FFFFFF;
  --color-rule: rgba(29, 29, 31, 0.14);
  --color-rule-light: rgba(255, 255, 255, 0.38);

  --radius: 3px;
  --shadow: 0 10px 34px rgba(29, 29, 31, .07);
  --shadow-lift: 0 14px 34px rgba(107, 15, 29, .26);
  --maxw: 1180px;

  /* 見出しは明朝、本文はゴシック。いずれもOS標準フォントのみ（ADR-004: Webフォント読込禁止） */
  --font-serif: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro",
    "Noto Serif JP", "Yu Mincho Light", "MS PMincho", serif;
  --font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

.screen {
  display: block;
}

.screen[hidden] {
  display: none;
}

/* ============================================================
   サイトヘッダ（ヒーロー以外の画面で表示する細いブランドバー）
   ============================================================ */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
  padding: 16px 24px;
}

body[data-screen="hero"] .site-header {
  display: none;
}

.brand {
  margin: 0;
  min-height: 1.6em;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--color-primary);
}

/* ============================================================
   S0 ヒーロー（左：深紅の面 ／ 右：アイボリー地＋図版＋CTA）
   ============================================================ */
.screen--hero {
  padding: 0;
}

.hero {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  min-height: 100vh;
}

.hero__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9vh 5.5vw;
  background-color: var(--color-crimson-deep);
  background-image:
    radial-gradient(120% 90% at 12% 8%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(158deg, var(--color-crimson-dark) 0%, var(--color-crimson-deep) 58%, #4C0813 100%);
  color: #fff;
}

/* 深紅の面にごく薄い斜めの陰影を重ね、単色のベタ塗りに見えないようにする */
.hero__brand::after {
  content: "";
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

/* 文言は app.js が CONFIG から注入するため、読み込み直後は空になる。
   1行ぶんの高さをあらかじめ確保して、描画後のガタつき（CLS）を防ぐ */
.hero__label {
  margin: 0 0 34px;
  min-height: 1.4em;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .44em;
  text-indent: .44em;
  line-height: 1.4;
  color: var(--color-gold);
}

.tool-name {
  margin: 0;
  min-height: calc(1.5em + 56px);
  padding: 28px 0;
  border-top: 1px solid var(--color-rule-light);
  border-bottom: 1px solid var(--color-rule-light);
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 600;
  letter-spacing: .24em;
  text-indent: .24em;
  line-height: 1.5;
  color: #fff;
}

.catch-copy {
  margin: 36px 0 0;
  min-height: 2.2em;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 2.2;
  color: rgba(255, 255, 255, .92);
}

.hero__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 9vh 4vw;
  background-color: var(--color-bg);
}

.hero__figure {
  display: block;
  width: min(560px, 94%);
  height: auto;
}

/* ============================================================
   進捗バー（S1-S3・S4）
   ============================================================ */
.progress-bar {
  height: 4px;
  background: rgba(185, 28, 46, 0.14);
  overflow: hidden;
  margin-bottom: 14px;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

/* 初期幅はCSSで与える。HTMLのstyle属性はCSP(style-src 'self')でブロックされるため使用しない（SEC-002） */
.progress-bar__fill--step1 { width: 33%; }
.progress-bar__fill--step2 { width: 66%; }
.progress-bar__fill--step3 { width: 100%; }
.progress-bar__fill--empty { width: 0%; }

.progress-label {
  margin: 0 0 36px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--color-muted);
}

/* ============================================================
   S1-S3 入力フォーム（中央のパネル）
   ============================================================ */
.screen--form,
.screen--calc,
.screen--result {
  padding: 72px 24px 96px;
}

/* 入力画面はカードが上に張り付いて下が空くのを避け、画面中央に置く */
.screen--form {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 57px);
}

.panel {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 52px 60px 56px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.field-label {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
}

.field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-rule);
}

.field-input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 4px;
  font-size: 28px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  border: none;
  background: transparent;
  color: var(--color-ink);
}

.field-input:focus {
  outline: none;
}

.field-row:focus-within {
  border-bottom-color: var(--color-primary);
}

.field-unit {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
}

.hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-muted);
}

.error {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-danger);
}

.error[hidden] {
  display: none;
}

.form-actions {
  display: flex;
  gap: 14px;
  margin-top: 40px;
}

/* ============================================================
   ボタン（タップ領域44px以上・NFR-USE-001）
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 14px 24px;
  border-radius: 999px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .08em;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity .2s ease, transform .2s ease;
}

.btn:hover {
  opacity: .88;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  flex: 1;
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
}

.btn--hero {
  flex: 0 0 auto;
  min-width: 280px;
  padding: 20px 52px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .22em;
  text-indent: .22em;
  box-shadow: var(--shadow-lift);
}

.btn--line {
  background: var(--color-line);
  color: #fff;
  width: 100%;
  margin-top: 24px;
  padding: 18px 24px;
  font-size: 16px;
}

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  width: 100%;
  margin-top: 12px;
  padding: 18px 24px;
  font-weight: 400;
}

.btn--retry {
  width: 100%;
  margin-top: 12px;
  font-weight: 400;
  border: none;
  color: var(--color-muted);
}

/* ============================================================
   S4 計算中
   ============================================================ */
.screen--calc {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.calc-box {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.calc-message {
  margin: 0 0 28px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 600;
  letter-spacing: .18em;
  text-indent: .18em;
}

/* ============================================================
   S5-S6 結果（デスクトップは2カラム）
   ============================================================ */
/* 成約率＋損失額の見せ場（全幅）。上辺の深紅帯でヒーローと色を連続させる */
.result-hero {
  max-width: var(--maxw);
  margin: 0 auto 28px;
  padding: 48px 56px 52px;
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-crimson-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

.result-rate-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--color-muted);
}

/* 成約率と損失額の数字は、見出しの明朝とは切り替えてゴシック太字で大きく見せる
   （2026-08-16 ユーザー指示。明朝は見出し・本文側に残す） */
.result-rate {
  display: inline-block;
  margin: 0;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--color-rule);
  font-family: var(--font-family);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.25;
  color: var(--color-primary);
}

.result-loss {
  margin-top: 30px;
}

.result-loss[hidden] {
  display: none;
}

/* 損失額はページ内で最大の文字（ACC-FR-RPT-001-2）。
   全幅の見せ場に置くことで、デスクトップでは各行が折り返さずに収まる */
.result-loss-line {
  margin: 0 0 14px;
  font-family: var(--font-family);
  font-size: clamp(32px, 3.9vw, 58px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--color-danger);
}

.result-loss-line:last-child {
  margin-bottom: 0;
}

.result-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas:
    "result guide"
    "pitch  guide";
  gap: 28px;
  align-items: start;
  max-width: var(--maxw);
  margin: 0 auto;
}

.result-card { grid-area: result; }
.pitch-card  { grid-area: pitch; }

/* CTAカードは左カラムより短くなるため、スクロールに追従させて常に手元に置く */
.guide-card {
  grid-area: guide;
  position: sticky;
  top: 24px;
}

.result-card,
.guide-card,
.pitch-card {
  background-color: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 44px 44px;
}

.result-message {
  margin: 0;
  font-size: 17px;
  line-height: 2.05;
}

/* 左カラム下段の営業コピー */
.pitch__heading {
  margin: 0 0 22px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
  color: var(--color-crimson-deep);
}

.pitch__body {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 2.05;
}

.pitch__body:last-child {
  margin-bottom: 0;
}

.result-message .em {
  color: var(--color-danger);
  font-weight: 700;
}

/* 注記は常時表示・折りたたみ禁止・本文の80%以上（C-LAW-002 / ACC-FR-RPT-004-2） */
.notice {
  margin: 26px 0 0;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-muted);
  background: rgba(110, 110, 115, 0.07);
  border-left: 2px solid var(--color-rule);
  border-radius: 2px;
}

.guide-text {
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
}

.site-footer {
  max-width: var(--maxw);
  margin: 56px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-rule);
  text-align: center;
}

.footer-note {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-muted);
}

/* ============================================================
   レスポンシブ（モバイルは1カラムのフォールバック）
   ============================================================ */
@media (max-width: 960px) {
  .result-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "result"
      "guide"
      "pitch";
    gap: 20px;
  }

  /* 1カラムでは追従させない（注記とCTAの位置関係が崩れるため） */
  .guide-card {
    position: static;
  }
}

@media (max-width: 900px) {
  body {
    line-height: 1.8;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero__brand {
    padding: 64px 24px 56px;
  }

  /* 狭い画面では字間を詰め、キャッチコピーが1文字だけ折り返すのを防ぐ */
  .tool-name {
    letter-spacing: .16em;
    text-indent: .16em;
  }

  .catch-copy {
    margin-top: 28px;
    letter-spacing: .04em;
    line-height: 2;
  }

  .hero__stage {
    gap: 32px;
    padding: 44px 24px 64px;
  }

  .hero__figure {
    width: min(360px, 88%);
  }

  .btn--hero {
    width: 100%;
    min-width: 0;
  }

  .screen--form,
  .screen--calc,
  .screen--result {
    padding: 32px 16px 56px;
  }

  .screen--form {
    min-height: 0;
    display: block;
  }

  .panel {
    padding: 32px 24px 36px;
  }

  .result-hero {
    margin-bottom: 18px;
    padding: 28px 22px 32px;
  }

  .result-card,
  .guide-card,
  .pitch-card {
    padding: 28px 22px 32px;
  }

  .result-message {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.9;
  }

  .notice {
    margin-top: 18px;
    padding: 14px 14px;
    font-size: 14px;
    line-height: 1.75;
  }

  .btn--line {
    margin-top: 16px;
  }

  .site-footer {
    margin-top: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar__fill,
  .btn {
    transition: none;
  }
}