/* v2で増えた要素の最小スタイル
 * デザインは未着手（ひろみ方針: 中身 → その後デザイン）。
 * ここは「中身が読める」ことだけを担保する。style.css（v1）は触っていない。
 */

/* 中央1カラム。v1は1191pxの全幅ベタ組みだった */
.screen { max-width: 620px; margin: 0 auto; padding: 32px 20px 64px; }

/* 選択肢に説明の一行を持たせる */
.option { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; }
.opt-body { display: flex; flex-direction: column; gap: 2px; }
.opt-label { font-size: 17px; line-height: 1.6; }
.opt-hint { font-size: 14px; color: #6E6A66; line-height: 1.6; }
/* チェック時の見た目は style.css の [aria-checked=true] が持つ。ここでは上書きしない */

/* 02 工程リスト。判定ごとに色を変える */
.steps { list-style: none; margin: 16px 0 24px; padding: 0; }
.st { display: flex; gap: 12px; align-items: flex-start;
      padding: 12px 14px; margin-bottom: 6px; border-radius: 10px;
      border: 1px solid var(--line); background: #fff; }
.st-kind { flex: 0 0 auto; font-size: 12px; letter-spacing: .04em;
           padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.st-text { font-size: 16px; line-height: 1.7; }
.st-note { display: block; font-size: 13px; color: #6E6A66; font-style: normal; margin-top: 2px; }

.st-give .st-kind { background: #FBE9E1; color: #A8431F; }
.st-with .st-kind { background: #EAF0EE; color: #3D5B52; }
.st-own  .st-kind { background: #2B3232; color: #fff; }
.st-wait .st-kind { background: #F0EFED; color: #75706B; }
.st-own  { border-color: #2B3232; }

.r-section { margin: 48px 0; }
.r-section .no { font-size: 13px; letter-spacing: .12em; color: var(--brick); margin: 0 0 4px; }
.r-section h2 { font-size: 24px; line-height: 1.5; margin: 0 0 8px; }
.r-section .sub { font-size: 15px; color: #6E6A66; margin: 0 0 8px; }
.say { font-size: 17px; line-height: 2; }
.lowest { font-size: 16px; line-height: 1.9; padding: 14px 16px;
          background: #F7F5F2; border-radius: 10px; }
.hero-sub { font-size: 13px; color: #6E6A66; line-height: 1.8; }
.radar-wrap { max-width: 340px; margin: 0 auto; }
.radar text { font-size: 11px; fill: #6E6A66; }

.prompt-box { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 12px; }
.prompt-head { display: flex; justify-content: space-between; align-items: center;
               padding: 8px 12px; background: #F7F5F2; }
.prompt-box pre { margin: 0; padding: 14px; font-size: 14px; line-height: 1.9;
                  white-space: pre-wrap; word-break: break-word; }
.prompt-toast { font-size: 13px; color: #6E6A66; min-height: 1.4em; }

.rm-step { padding: 16px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; background:#fff; }
.rm-step.is-done { opacity: .68; }
.rm-badge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
            background: var(--brick); color: #fff; margin-bottom: 6px; }
.rm-no { font-size: 12px; letter-spacing: .1em; color: var(--brick); margin: 0; }
.rm-period { margin-left: 8px; color: #6E6A66; letter-spacing: 0; }
.rm-phase { font-size: 13px; color: #6E6A66; margin: 2px 0 4px; }
.rm-step h3 { font-size: 18px; margin: 0 0 6px; }
.rm-step p { font-size: 15px; line-height: 1.9; margin: 0; }
.rm-note { font-size: 13px; color: #6E6A66; }

.r-cta { margin-top: 56px; padding: 28px 20px; border-radius: 12px; background: #2B3232; color: #fff; }
.r-cta h2 { font-size: 22px; line-height: 1.6; margin: 6px 0 10px; }
.r-cta .word { font-size: 15px; line-height: 1.9; opacity: .9; }
.r-cta .primary { margin-top: 12px; }
/* 相談の入口は2つ。名刺など企業から来る人にはメールのほうが自然なので、
 * LINEの予備扱いにせず同じ大きさのボタンで並べる（ひろみ 2026-10-02） */
/* 相談の入口は、予約カレンダーが主。その下にLINEとメールを小さく置く（ひろみ 2026-10-02） */
.r-cta .bookbtn { display: block; text-decoration: none; text-align: center; }
.r-cta .sub-cta { margin: 22px 0 8px; font-size: 13px; opacity: .75; text-align: center; }
.r-cta .ghost-line {
  display: inline-block; margin: 0 6px 8px; padding: 10px 18px; min-height: 44px;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: transparent; color: #fff; font-size: 14px; font-family: inherit;
  text-decoration: none; cursor: pointer; line-height: 1.6;
}
.r-cta .mail { margin-top: 6px; font-size: 12px; opacity: .65; text-align: center; }
.r-restart { text-align: center; margin-top: 28px; }

@media (max-width: 520px) {
  .screen { padding: 24px 16px 56px; }
  .r-section h2 { font-size: 21px; }
  .st { flex-direction: column; gap: 6px; }
}

/* v1のCSSは .screen を固定高さの内側スクロールにしていた。
 * v2は結果が長くなり、CTAのフッターが高さ56pxに潰れて相談ボタンが見えなくなった
 * （2026-09-29 実測: .screen h734/中身5752、.r-cta h56/中身313）。
 * ページ全体でスクロールする形に戻す。 */
html, body { height: auto; overflow-y: auto; }
.stage, .screen, .q-body, .r-cta, .r-body {
  height: auto; min-height: 0; max-height: none; overflow: visible;
}
.screen.result { display: block; }

/* .stage は position:fixed + inset:0 で画面サイズに固定されていた。
 * height:auto だけでは効かないので、位置指定ごと戻す（2026-09-29 実測で判明）。 */
.stage { position: static; inset: auto; display: block; }

/* 02の下。main 以外に選ばれた作業を短く返す */
.others { margin-top: 20px; padding: 16px; background: #F7F5F2; border-radius: 10px; }
.others-h { font-size: 15px; margin: 0 0 8px; color: #4A4642; }
.others ul { list-style: none; margin: 0; padding: 0; }
.others li { font-size: 15px; line-height: 1.9; padding: 4px 0; }


/* ══════════════════════════════════════════════════════════════
   2026-09-30 デザイン改修（仕様: ../20260930_デザイン仕様書.md 第8・9節）
   正本: DESIGN.md → STONE EDITORIAL プレイブック
   足したもの: 地の色でリズム（Steep由来）／アクセントは1画面に1回（Steep・Brex・ElevenLabs共通）
   ══════════════════════════════════════════════════════════════ */

:root {
  --paper:    #FDFDFD;  /* 大理石の素地（純白は使わない・ElevenLabs/STONE共通） */
  --paper-in: #F5F3F1;  /* 沈んだ面。地で区切るための2段目（Steep） */
  --hair:     #EBE8E4;  /* ヘアライン。罫線はこれ1本だけ */
  --brick:    #D14306;  /* いま選ばれている／いま押せる、の1つだけに使う */
}

/* ── 破れ①低コントラスト（色相・彩度を保ち明度だけ落として床へ）──
   計測値と算出は仕様書 第2・3節。新しい色は発明していない */
#next:disabled            { color: #8B8883; }        /* 2.14 → 3.05（床3.0） */
.r-hero .label,
.r-section .label,
.prompt-head .label       { color: #827559; }        /* 2.49 → 4.53（床4.5） */
.st-kind                  { color: #706C67; }        /* 4.26 → 4.53 */
.specialty .label,
.jp-label                 { color: #7D6E50; }        /* 3.18 → 4.57 */

/* ── 破れ②極小文字（プレイブック「13pxより小さい文字は作らない」）── */
.radar text { font-size: 13px; }
.st-kind    { font-size: 13px; }

/* ── 破れ③角丸を3種へ（選択肢12／ボタン8／区切り0）── */
.progress i { border-radius: 0; }      /* 区切りなので角丸なし（旧3px） */
.option .box{ border-radius: 4px; }    /* 旧6px。チェックは小さな面なので最小値に寄せる */

/* ══ 質問画面: カードの並びをやめる ══
   同じ大きさの箱が等間隔に並ぶ構造そのものが「全部同じ重要度」を作る。
   罫線区切りのリストにして、主役を設問に戻す。 */

.screen.question .q-head { background: var(--paper); }
.screen.question .q-body { background: var(--paper-in); }   /* 地で区切る */

.screen.question h2 {
  font-size: 32px;          /* 設問を1画面の主役にする（旧24px） */
  line-height: 1.5;
  letter-spacing: .01em;
}

.options { border-top: 1px solid var(--hair); }
.option {
  border: 0;
  border-bottom: 1px solid var(--hair);   /* カードをやめ、ヘアラインで区切る */
  border-radius: 0;
  background: transparent;
  min-height: 66px;                       /* プレイブック: 押す面は66px以上 */
  padding: 14px 16px 14px 12px;
  box-shadow: none;
  transition: background .12s, transform .1s;
}
.opt-label { font-size: 18px; }           /* プレイブック: 押す面のラベル18px */
.opt-hint  { font-size: 14px; }           /* 声量差を保つため据え置き */

/* 選択は面で塗らない。左の柱＋太字＋チェックで示す（色だけに頼らない）
 * v1は「全面レンガ塗り＋白文字」だったため、地だけ白に変えると
 * 白地に白文字になって選択肢が読めなくなった（2026-09-30 実測で発覚）。
 * 文字・チェック・地をすべて明示で上書きする。 */
.option[aria-checked="true"] {
  background-color: var(--paper);
  background-image: none;          /* v1のレンガのグラデ＋粒を消す */
  border-color: var(--hair);
  color: #3D3B39;                  /* 白文字を戻す */
  box-shadow: inset 4px 0 0 var(--brick);
}
.option[aria-checked="true"] .opt-label { font-weight: 700; color: #3D3B39; }
.option[aria-checked="true"] .opt-hint  { color: #6E6964; }
.option[aria-checked="true"] .box {
  background: var(--brick);        /* チェックの升はレンガ地に白いチェック */
  border-color: var(--brick);
}
.option[aria-checked="true"] .box svg { stroke: #fff; opacity: 1; }

/* ── 押した反応（プレイブック第5節・100ms以内に沈む。今まで未実装だった）── */
.option:active,
.primary:active,
.ghost:active,
.copy:active { transform: translateY(2px); box-shadow: none; }

/* ── 結果ページ: 節ごとに地を交互にして8画面分の長さに区切りを入れる ── */
.screen.result             { background: var(--paper); }
.r-section:nth-of-type(even){ background: var(--paper-in); }
.r-section {
  margin: 0;
  padding: 48px 20px;       /* 地で区切るので、節の間の余白は内側に持たせる */
}
.others { background: var(--paper); }

/* ── 地を交互にしたことで比が変わり、新しく出た低コントラストを直す
 *   （金継ぎ「新しく壊れた場所」。地を変えれば比は変わる。実測で発覚 2026-09-30）
 *   .st-kind は .st-wait .st-kind（クラス2つ）の方が詳細度が高く、
 *   単一クラスの指定が負けていた。同じ詳細度で書き直す。 */
.r-section .no      { color: #C74006; }   /* レンガ 4.20 → 4.56（地 #F5F3F1） */
.st-wait .st-kind   { color: #706C67; }   /* 4.26 → 4.53 */
.r-section .label,
.prompt-head .label { color: #7B6D4F; }   /* 3.12 → 4.58（沈んだ地の上） */

/* ── 04 今日からできること: プロンプト欄をやめ、段取りを出す
 *   ひろみ判断（2026-09-30）「Aでいいよ」＝ 方法だけ伝える。プロンプトは渡さない。 */
.todo { list-style: none; margin: 20px 0 16px; padding: 0; counter-reset: none; }
.todo-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 16px 16px 14px; margin-bottom: 8px;
  background: var(--paper); border-left: 3px solid var(--hair);
}
.todo-n  { flex: 0 0 auto; font-size: 20px; line-height: 1.5; color: #8B8883; font-family: var(--en, inherit); }
.todo-body { display: flex; flex-direction: column; gap: 4px; }
.todo-t  { font-size: 18px; line-height: 1.7; font-weight: 700; }
.todo-n2 { font-size: 15px; line-height: 1.8; color: #6E6964; }
.todo-close { margin-top: 18px; }

/* 01のタイプ表示／04の進め方（ひろみ 2026-09-30「タイプ別にやることが違うはず」） */
.rtype    { font-size: 16px; line-height: 1.9; padding: 14px 16px; margin-top: 10px;
            background: var(--paper); border-left: 3px solid var(--hair); }
.todo-how { font-size: 16px; line-height: 1.9; padding: 14px 16px; margin-top: 14px;
            background: var(--paper-in); border-left: 3px solid var(--brick); }

/* 03「あなたがやること」（ひろみ口述 2026-10-01） */
.youdo { list-style: none; margin: 12px 0 16px; padding: 0; }
.youdo li { font-size: 17px; line-height: 1.9; padding: 14px 16px; margin-bottom: 8px;
            background: var(--paper); border-left: 3px solid var(--brick); }
/* 2026-10-02 回答の事実と提案を区別する表示。STONE EDITORIALを維持。 */
.r-hero { padding: 32px 20px; }
.r-hero h1 { font-size: clamp(24px,4vw,32px); line-height: 1.65; overflow-wrap: anywhere; }
.answer-summary { margin: 20px 0; border-left: 3px solid var(--brick); padding: 0 0 0 18px; }
.answer-summary dt { font-size: 14px; color: #6E6964; margin-top: 18px; }
.answer-summary dd { margin: 5px 0 0; font-size: 18px; font-weight: 700; line-height: 1.7; }
.change-flow { padding: 10px 0; }
.change-flow > div { border-top: 1px solid var(--hair); padding: 18px 0 8px; }
.change-flow > div > span { font-size: 14px; font-weight: 700; color: var(--brick-deep); }
.change-flow p { font-size: 18px; line-height: 1.8; margin: 8px 0; }
.flow-arrow { display: block; font-size: 26px; color: #6E6964; margin: 0 0 6px; }
.more-details { padding: 20px; border-top: 1px solid var(--hair); }
.more-details summary { cursor: pointer; font-size: 17px; line-height: 1.7; padding: 12px 0; }
.more-details p,.more-details li { font-size: 16px; line-height: 1.9; }
.focus-stage { border: 2px solid var(--brick-deep); }
.r-cta h2,.r-cta .primary { overflow-wrap: anywhere; }
.r-cta .primary { min-height: 66px; padding: 16px 12px; white-space: normal; font-size: 17px; }
@media(max-width: 420px) { .r-section { padding: 32px 18px; } .r-cta { padding: 26px 18px; } }