:root {
    --bg: #F5F5F0; --card: #fff; --ink: #18181B; --muted: #71717A; --border: #E4E4E7;
    --blue: #2563EB; --blue-bg: #EFF6FF; --blue-ring: rgba(37,99,235,.3);
    --emerald: #10B981; --slate900: #0F172A; --slate50: #F8FAFC;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background-color: var(--bg);
    min-height: 100vh;
    visibility: hidden;
  }

  /* 上paddingに env(safe-area-inset-top) を足し、iOSノッチ/ステータスバーに上部要素が潜らないように。
     env() は非対応/非ノッチ端末では 0 になるためデスクトップ・Androidの余白は変わらない（viewport-fit=cover が前提）。 */
  .page-content { max-width: 900px; margin: 0 auto; padding: env(safe-area-inset-top) 16px 24px; }
  @media (min-width: 640px) { .page-content { padding: env(safe-area-inset-top) 24px 24px; } }

  /* ウィザードカード（理想デザイン: 白カード・角丸22px・薄影。内部3段=prog/body/footで構成） */
  .wizard-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
    overflow: hidden; margin-top: 20px;
  }

  /* プログレスヘッダー（card-prog: セクション名 + 連番/総数 + emeraldバー） */
  .progress-header {
    padding: 18px 28px; border-bottom: 1px solid var(--border);
  }
  .progress-top {
    display: flex; align-items: baseline; justify-content: space-between;
  }
  .progress-sec { font-size: 14px; font-weight: 600; color: var(--ink); }
  .progress-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .progress-bar {
    height: 6px; background: #E2E8F0; border-radius: 3px;
    margin-top: 8px; overflow: hidden;
  }
  .progress-fill {
    height: 100%; background: var(--emerald); border-radius: 3px;
    transition: width 0.3s ease;
  }

  /* ステップコンテンツ（card-body） */
  .step-content {
    padding: 36px 32px;
  }
  .step-title {
    font-size: 28px; font-weight: 700; color: var(--ink);
    letter-spacing: -.01em; line-height: 1.3;
  }
  .step-question {
    font-size: 16px; font-weight: 600; color: #18181B;
    margin-top: 24px; line-height: 1.4;
  }
  @media (max-width: 639px) {
    .step-content { padding: 28px 20px; }
    .step-title { font-size: 24px; }
  }

  /* 大きな選択ボタン（はい/いいえ）。理想デザイン .choice 準拠:
     min-height 96px・角丸18px・border-2・縦中央寄せ。選択時 青ring + ✓バッジ。
     ✓バッジは ::before 擬似要素で描く（DOM追加なし・E2Eの data-field 参照に影響しない）。 */
  .choice-group {
    display: flex; gap: 16px; margin-top: 28px;
  }
  .choice-btn {
    position: relative; flex: 1;
    min-height: 96px; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 6px;
    padding: 16px; border: 2px solid var(--border); border-radius: 18px;
    background: #fff; cursor: pointer; font-family: inherit;
    font-size: 20px; font-weight: 700; color: var(--ink); text-align: center;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  }
  .choice-btn:hover { border-color: var(--ink); }
  .choice-btn.selected {
    border-color: var(--blue); color: var(--blue);
    background: var(--blue-bg);
    box-shadow: 0 0 0 2px var(--blue-ring);
  }
  .choice-btn.selected::before {
    content: '✓';
    position: absolute; top: 12px; right: 12px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
  }

  /* 発見された状況ステップ: イラスト付きカード（理想デザイン .ill 準拠）。
     .choice-btn の大ボタン基盤(border-2・角丸18px・青ring+✓バッジ)を継承し、
     画像を上に置く。複数カードは2列グリッド、単独(外傷のみ・img無し)は横幅いっぱい中央寄せ。 */
  .discovery-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px;
  }
  .discovery-card {
    padding: 20px; gap: 12px;
  }
  .discovery-card-img {
    width: 120px; height: 90px; object-fit: contain;
    background: #F1F5F9; border-radius: 10px;
  }
  .discovery-cards-single {
    display: block; margin-top: 16px;
  }
  .discovery-cards-single .choice-btn {
    width: 100%; min-height: 0; flex-direction: row; padding: 16px 18px;
  }
  /* スマホでは2列カードの最小幅(画像120+padding40+border4=164px)が narrow 幅で見切れる。
     画像とpaddingを縮めてカード最小幅を下げ、右カードが overflow:hidden に食われないようにする。
     font-sizeも17pxに下げて長ラベルの不格好な1文字折返しを緩和。デスクトップは不変。 */
  @media (max-width: 639px) {
    .discovery-card { padding: 14px; font-size: 17px; }
    .discovery-card-img { width: 100px; height: 75px; }
  }

  /* 展開セクション */
  .expand-section {
    display: none; margin-top: 32px;
  }
  .expand-section.visible { display: block; }
  .expand-subtitle {
    font-size: 16px; font-weight: 600; color: #18181B; line-height: 1.4;
  }

  /* 2カラムカード（発生場所 / 周囲の環境） */
  .two-col-cards {
    display: flex; gap: 16px; margin-top: 16px;
  }
  .info-card {
    flex: 1; background: #F4F4F5; border-radius: 8px; padding: 20px;
  }
  .info-card-title {
    font-size: 15px; font-weight: 600; color: #18181B; line-height: 1; margin-bottom: 16px;
  }
  .info-card-category {
    font-size: 13px; font-weight: 500; color: rgba(24,24,27,0.6);
    margin-top: 16px; margin-bottom: 8px; line-height: 1;
  }
  .info-card-category:first-of-type { margin-top: 0; }
  .radio-list {
    display: flex; flex-direction: column; gap: 12px; margin-top: 24px;
  }
  .radio-list label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #18181B; cursor: pointer;
  }
  .radio-list input[type="radio"] {
    width: 18px; height: 18px; accent-color: #18181B; cursor: pointer; flex-shrink: 0;
  }

  /* 縦並び選択肢を横幅いっぱいのカード化（理想デザイン .opt 準拠）。
     E2E は input[name][value].check() を使うため input は隠さず appearance:none で
     カスタムチェック印に変える（クリック可能性を維持）。選択時は :has(input:checked) で
     親カードを青枠化。reveal 内のチップ化はこれより詳細度の高いセレクタで上書きする。 */
  .radio-list > div, .check-list > div {
    position: relative;
    border: 2px solid var(--border); border-radius: 14px;
    background: #fff; transition: border-color 0.2s, background 0.2s;
  }
  .radio-list > div:has(> label > input:checked),
  .check-list > div:has(> label > input:checked) {
    border-color: var(--blue); background: var(--blue-bg);
  }
  .radio-list > div > label, .check-list > div > label {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 48px 16px 18px;
    font-size: 16px; font-weight: 700; color: var(--ink);
  }
  .radio-list > div:has(> label > input:checked) > label,
  .check-list > div:has(> label > input:checked) > label { color: var(--blue); }
  /* チェック印（input本体を○/□のカスタム印に。右端配置） */
  .radio-list > div > label > input[type="radio"],
  .check-list > div > label > input[type="checkbox"] {
    position: absolute; top: 50%; right: 18px; transform: translateY(-50%);
    appearance: none; -webkit-appearance: none; margin: 0;
    width: 24px; height: 24px; border: 2px solid #CBD5E1; background: #fff;
    cursor: pointer; flex-shrink: 0; transition: border-color 0.2s, background 0.2s;
  }
  .radio-list > div > label > input[type="radio"] { border-radius: 50%; }
  .check-list > div > label > input[type="checkbox"] { border-radius: 6px; }
  .radio-list > div > label > input[type="radio"]:checked,
  .check-list > div > label > input[type="checkbox"]:checked {
    border-color: var(--blue); background: var(--blue);
  }
  .radio-list > div > label > input:checked::after,
  .check-list > div > label > input:checked::after {
    content: '✓'; color: #fff; font-size: 13px;
    display: flex; align-items: center; justify-content: center; height: 100%;
  }
  .detail-input {
    width: 100%; margin-top: 12px; padding: 10px 12px;
    border: 1px solid #E4E4E7; border-radius: 4px;
    font-size: 14px; font-family: inherit; color: #18181B; background: white;
  }
  .detail-input:focus { outline: 2px solid #18181B; outline-offset: -1px; }
  .detail-hint {
    font-size: 12px; color: #A1A1AA; margin-top: 4px;
  }

  /* 展開サブセクション（確認した→チェックボックス） */
  .env-sub {
    display: none; margin-top: 12px;
    background: white; border-radius: 8px; padding: 16px;
  }
  .env-sub.visible { display: block; }
  .badge-multi {
    display: inline-block; font-size: 12px; font-weight: 600;
    color: white; background: #18181B; border-radius: 4px;
    padding: 3px 8px; margin-bottom: 12px; line-height: 1;
  }
  .check-list {
    display: flex; flex-direction: column; gap: 12px; margin-top: 24px;
  }
  .check-list label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #18181B; cursor: pointer;
  }
  .check-list input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: #18181B; cursor: pointer; flex-shrink: 0;
  }

  /* 3列ラジオグリッド（介助・支援内容） */
  .radio-grid-3col {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 24px; margin-top: 12px;
  }
  .radio-grid-3col label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #18181B; cursor: pointer;
  }
  .radio-grid-3col input[type="radio"] {
    width: 18px; height: 18px; accent-color: #18181B; cursor: pointer; flex-shrink: 0;
  }

  /* 展開カード（介助内容等） */
  .expand-card {
    display: none; background: #F4F4F5; border-radius: 8px;
    padding: 20px; margin-top: 12px;
  }
  .expand-card.visible { display: block; }
  .expand-card-title {
    font-size: 15px; font-weight: 600; color: #18181B; line-height: 1; margin-bottom: 16px;
  }

  @media (max-width: 639px) {
    .two-col-cards { flex-direction: column; }
    .radio-grid-3col { grid-template-columns: 1fr 1fr; }
  }

  /* 4列チェックボックスグリッド（部位選択） */
  .check-grid-4col {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px; margin-top: 12px;
  }
  .check-grid-4col .info-card-category { margin-top: 0; }
  .symptom-item { margin-top: 10px; }
  .symptom-item:first-child { margin-top: 0; }
  .symptom-item label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #18181B; cursor: pointer;
  }
  .symptom-item input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: #18181B; cursor: pointer; flex-shrink: 0;
  }
  .symptom-parts {
    display: none; margin-top: 8px; margin-left: 26px;
  }
  .symptom-parts.visible { display: block; }

  /* 写真撮影UI */
  .photo-uploads-container { margin-top: 12px; }
  .photo-hint {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; margin-top: 12px;
    background: #F9FAFB; border: 1px dashed #D4D4D8;
    border-radius: 6px; color: #A1A1AA; font-size: 13px;
  }
  .photo-hint-icon { font-size: 16px; }
  .photo-part-section {
    padding: 10px 14px; margin-top: 8px;
    border-radius: 8px; border-left: 4px solid;
  }
  .photo-part-label {
    font-size: 13px; font-weight: 700; margin-bottom: 8px;
  }
  .photo-upload-buttons {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .photo-upload-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    color: #3F3F46; background: white; border: 1.5px dashed #A1A1AA;
    border-radius: 8px; cursor: pointer;
  }
  .photo-upload-btn:hover { background: #F4F4F5; border-color: #71717A; }
  .photo-upload-btn input[type="file"] { display: none; }
  .photo-upload-btn .badge-optional {
    font-size: 11px; color: #A1A1AA; font-weight: 400;
  }
  .photo-preview {
    display: flex; gap: 8px; margin-top: 8px;
    overflow-x: auto; padding-bottom: 4px;
  }
  .photo-preview:empty { display: none; }
  .photo-thumb {
    position: relative; width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden; background: #F4F4F5;
  }
  .photo-thumb img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .photo-thumb-remove {
    position: absolute; top: 2px; right: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(0,0,0,0.6); color: white;
    font-size: 12px; line-height: 20px; text-align: center;
    cursor: pointer; border: none; padding: 0;
  }

  /* フォーム要素 */
  .form-row { display: flex; gap: 12px; margin-top: 16px; align-items: flex-start; }
  .form-group { flex: 1; min-width: 0; }
  /* ラベル（理想 .flabel: 14px・weight600・muted・下マージン6px） */
  .form-label {
    display: block; font-size: 14px; font-weight: 600;
    color: var(--muted); line-height: 1.4; margin-bottom: 6px;
  }
  /* 入力（理想 .finput: 角丸12px・padding14-16px・16px・border1px。
     基本情報/日時/reveal内テキスト共通。create-new.html専用＝旧フロー波及なし） */
  .form-input, .form-select, .form-textarea {
    width: 100%; font-size: 16px; line-height: 1.5;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
    font-family: inherit; color: var(--ink); background: #fff;
  }
  /* select は理想 .fselect: padding 12-14px（少し詰める） */
  .form-select { padding: 12px 14px; }
  .form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: 2px solid var(--blue); outline-offset: -1px;
  }
  .form-textarea { resize: vertical; min-height: 100px; }

  /* 和暦/西暦トグル（理想 .btoggle: 黒pill・内側白selボタン） */
  .birthdate-toggle {
    display: inline-flex; gap: 4px; background: var(--slate900);
    border-radius: 10px; padding: 4px; overflow: visible;
  }
  .birthdate-toggle-btn {
    padding: 6px 14px; font-size: 13px; font-weight: 600; font-family: inherit;
    border: none; background: none; color: #94A3B8; cursor: pointer;
    border-radius: 7px; transition: background 0.15s, color 0.15s;
  }
  .birthdate-toggle-btn.active { background: #fff; color: var(--slate900); }

  /* 生年月日 select群（和暦/西暦とも全項目プルダウン）。
     幅autoの小さいselectを横並び＋スマホでは折り返して見切れを防ぐ。 */
  .birthdate-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
  .bd-year-group { display: inline-flex; align-items: center; gap: 6px; }
  .bd-select { width: auto; padding: 12px 10px; }
  .bd-unit { font-size: 14px; color: #52525B; }

  /* ラジオ・チェック */
  .radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
  .radio-label, .checkbox-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; color: #18181B; cursor: pointer;
  }
  .radio-label input, .checkbox-label input {
    width: 16px; height: 16px; accent-color: #18181B; cursor: pointer;
  }

  /* フッター帯（card-foot: slate50・上border・カード端まで広がる帯。左:キャンセル / 右:もどる・下書き・次へ） */
  .wizard-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 28px; border-top: 1px solid var(--border); background: var(--slate50);
  }
  .wizard-footer-left { display: flex; gap: 12px; }
  .wizard-footer-right { display: flex; gap: 12px; }
  .btn {
    height: 48px; font-size: 15px; font-weight: 600; line-height: 1;
    padding: 0 22px; border-radius: 14px; cursor: pointer;
    font-family: inherit; border: none; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-cancel { background: #fff; color: var(--muted); border: 2px solid var(--border); }
  .btn-cancel:hover { background: rgba(0,0,0,0.04); }
  .btn-draft { background: #fff; color: var(--ink); border: 2px solid var(--border); }
  .btn-draft:hover { background: rgba(0,0,0,0.04); }
  .btn-next { background: var(--slate900); color: white; border: none; }
  .btn-next:hover { background: #1E293B; }
  .btn-next.btn-final { background: var(--emerald); }
  .btn-next.btn-final:hover { background: #059669; }
  .btn-back { background: #fff; color: var(--ink); border: 2px solid var(--border); }
  .btn-back:hover { background: rgba(0,0,0,0.04); }
  /* AI生成中の無効化（UX-1）: 前進/後退/下書き保存を押せない状態と明示。hover効果も殺す。 */
  .btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn:disabled:hover { background: inherit; }

  /* ステップ非表示 */
  .step { display: none; }
  .step.active { display: block; }

  /* レスポンシブ */
  @media (max-width: 639px) {
    .choice-group { flex-direction: column; }
    .form-row { flex-direction: column; }
    /* フッター: 横paddingを詰めてボタン幅を稼ぎ、右3ボタン(もどる/下書き保存/次へ)を
       nowrap＋font微縮で1行に収める（「下書き保存」の2行折返し=不具合E を解消）。 */
    .wizard-footer { flex-direction: column; gap: 12px; padding: 16px; }
    .wizard-footer-left, .wizard-footer-right { width: 100%; }
    .wizard-footer-left .btn { width: 100%; }
    /* 右ボタン群は wrap 許可。通常ステップ(次へ)は3ボタンが1行に収まるが、最終ステップの
       緑ボタン「最終報告書の作成へ」は長く3等分枠に収まらず見切れるため、btn-final だけ
       全幅で2行目に落とす（もどる/下書き保存が1行目・緑ボタンが独立行）。 */
    .wizard-footer-right { flex-wrap: wrap; }
    .wizard-footer-right .btn { flex: 1; min-width: 0; padding: 0 6px; font-size: 14px; white-space: nowrap; }
    .wizard-footer-right .btn-final { flex-basis: 100%; }
    .check-grid-4col { grid-template-columns: 1fr 1fr; }
  }

  /* トースト */
  .toast {
    position: fixed; bottom: 24px; right: 24px;
    background: #18181B; color: white; padding: 12px 20px;
    border-radius: 8px; font-size: 14px; font-weight: 500;
    display: none; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .toast.show { display: block; }

  /* レビューセクション（Step5） */
  .ai-title { font-size: 18px; font-weight: 700; color: #18181B; line-height: 1.4; }
  .ai-desc { font-size: 14px; color: #71717A; margin-top: 8px; line-height: 1.6; }
  .review-section {
    background: #F4F4F5; border-radius: 12px; padding: 24px; margin-top: 24px;
  }
  .review-section-title {
    font-size: 18px; font-weight: 700; color: #18181B; margin-bottom: 16px; line-height: 1.4;
  }
  .review-card {
    background: white; border-radius: 8px; margin-bottom: 16px; overflow: hidden;
  }
  .review-card:last-child { margin-bottom: 0; }
  .review-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #E4E4E7;
  }
  .review-header-left { display: flex; align-items: center; gap: 8px; }
  .step-badge {
    display: inline-block; background: #009FA8; color: white;
    font-size: 13px; font-weight: 600; padding: 5px 12px;
    border-radius: 20px; line-height: 1;
  }
  .review-step-name { font-size: 15px; font-weight: 600; color: #18181B; }
  .btn-edit {
    display: flex; align-items: center; gap: 4px;
    background: none; border: 1px solid #E4E4E7; border-radius: 4px;
    padding: 6px 12px; font-size: 13px; font-weight: 500; color: #18181B;
    cursor: pointer; font-family: inherit;
  }
  .btn-edit:hover { background: #F4F4F5; }
  .btn-edit svg { width: 14px; height: 14px; }
  /* 「現在時刻を設定」ボタン（理想デザイン .btn-now: slate50・角丸10px・border） */
  .btn-set-now {
    display: inline-block; background: var(--slate50); border: 1px solid var(--border);
    border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.5; color: var(--ink);
    cursor: pointer; font-family: inherit; white-space: nowrap; font-weight: 500;
  }
  .btn-set-now:hover { background: #E4E4E7; border-color: #A1A1AA; }
  .review-body { padding: 20px; }
  .review-q {
    font-size: 14px; font-weight: 600; color: #18181B; margin-top: 16px; line-height: 1.4;
  }
  .review-q:first-child { margin-top: 0; }
  .review-a { font-size: 14px; color: #18181B; margin-top: 4px; line-height: 1.6; }
  /* 生成ボタン（理想 .gen-btn: 青背景・白・角丸12px・weight700） */
  .generate-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--blue); color: white; border: none;
    padding: 12px 20px; border-radius: 12px;
    font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; margin-top: 0;
  }
  .generate-btn:hover { background: #1D4ED8; }
  .bottom-two-col { display: flex; gap: 16px; margin-top: 16px; }
  .generated-textarea {
    flex: 1; min-height: 200px; border: 1px solid #E4E4E7;
    border-radius: 8px; padding: 16px; font-size: 14px;
    font-family: inherit; resize: vertical; color: #18181B;
  }
  .generated-textarea:focus { outline: 2px solid #18181B; outline-offset: -1px; }
  /* AI生成ブロック枠（理想 .gen: 薄青border2px #BFDBFE・blue-bg・角丸18px・padding20px）。
     marginTop はJS側インライン(24px)が効く。 */
  .ai-block {
    border: 2px solid #BFDBFE; background: var(--blue-bg);
    border-radius: 18px; padding: 20px;
  }
  /* ブロック見出し（理想 .gen-h: 15px・weight700）。buildAiBlockの .field-label を上書き */
  .ai-block .field-label {
    font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 14px;
  }
  /* 新フローの ai-block は bottom-two-col(flex) を持たないため textarea が縮む。
     旧stg並みに幅いっぱい・大きく表示する。枠内なので白背景・角丸12px。 */
  .ai-block .generated-textarea {
    width: 100%; box-sizing: border-box; min-height: 320px; margin-top: 16px;
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
  }
  .record-card { flex: 1; }
  .record-title { font-size: 16px; font-weight: 700; color: #18181B; line-height: 1.4; }
  .record-question { font-size: 14px; color: #18181B; margin-top: 12px; line-height: 1.4; }
  @media (max-width: 639px) { .bottom-two-col { flex-direction: column; } }

  /* 最終報告書 */
  .final-report { margin-top: 24px; }
  .final-report-section { margin-top: 32px; }
  .final-report-section:first-child { margin-top: 0; }
  .final-report-heading {
    font-size: 16px; font-weight: 700; color: #18181B; line-height: 1.4;
    padding-bottom: 8px; border-bottom: 2px solid #18181B; margin-bottom: 16px;
  }
  .final-report-subheading {
    font-size: 15px; font-weight: 600; color: #18181B; line-height: 1.4;
    margin-top: 24px; margin-bottom: 12px;
  }
  .report-info-table {
    width: 100%; border-collapse: collapse; font-size: 14px;
  }
  .report-info-table th {
    text-align: left; padding: 10px 12px; background: #F4F4F5;
    color: rgba(24,24,27,0.6); font-weight: 500; width: 160px;
    border: 1px solid #E4E4E7; white-space: nowrap;
  }
  .report-info-table td {
    padding: 10px 12px; color: #18181B; border: 1px solid #E4E4E7;
  }
  .report-text-block {
    background: #F9FAFB; border-radius: 8px; padding: 16px;
    font-size: 14px; color: #18181B; line-height: 1.8;
    margin-top: 12px; white-space: pre-wrap;
  }
  .stamp-section { margin-top: 40px; }
  .stamp-table { width:100%; border-collapse:collapse; table-layout:fixed; }
  .stamp-table th, .stamp-table td { border:1px solid #18181B; text-align:center; vertical-align:middle; }
  .stamp-table th { padding:8px 4px; font-size:13px; font-weight:600; color:#18181B; background:#F9FAFB; }
  .stamp-table th[contenteditable]:hover { background:#EEF2FF; cursor:text; }
  .stamp-table td { height:72px; padding:4px; }
  .report-chart-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px; margin-top: 16px;
  }
  .report-chart-card {
    background: #F4F4F5; border-radius: 8px; padding: 16px;
    text-align: center;
  }
  .report-chart-label {
    font-size: 13px; font-weight: 600; color: #18181B; margin-bottom: 12px;
  }
  .report-chart-card svg {
    width: 100%; height: auto; display: block;
  }
  .report-chart-single {
    max-width: 480px; margin-top: 16px;
  }
  @media (max-width: 639px) {
    .report-chart-grid { grid-template-columns: 1fr 1fr; }
    .report-info-table th { width: 120px; }
  }

  /* バリデーションエラー */
  .validation-error {
    outline: 2px solid #EF4444 !important;
    outline-offset: 2px;
    border-radius: 6px;
    animation: shake 0.3s ease;
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }

  /* 離脱確認モーダル */
  .leave-actions {
    display: flex; flex-direction: column; gap: 10px; margin-top: 24px;
  }
  .leave-btn {
    font-size: 14px; font-weight: 500; padding: 12px 24px; border-radius: 6px;
    cursor: pointer; font-family: inherit; width: 100%; text-align: center;
  }
  .leave-draft {
    background: #18181B; color: white; border: none;
  }
  .leave-draft:hover { background: #27272A; }
  .leave-discard {
    background: white; color: #EF4444; border: 1px solid #EF4444;
  }
  .leave-discard:hover { background: #FEF2F2; }
  .leave-cancel {
    background: white; color: #71717A; border: 1px solid #E4E4E7;
  }
  .leave-cancel:hover { background: #F4F4F5; }

  /* 上書き確認モーダル */
  .overwrite-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 200; align-items: center; justify-content: center;
  }
  .overwrite-overlay.open { display: flex; }
  .overwrite-box {
    background: white; border-radius: 8px; padding: 32px;
    max-width: 480px; width: calc(100% - 32px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  }
  .overwrite-title {
    font-size: 18px; font-weight: 700; color: #18181B; margin-bottom: 16px;
  }
  .overwrite-body {
    font-size: 14px; color: #18181B; line-height: 1.7;
  }
  .overwrite-actions {
    display: flex; justify-content: center; gap: 12px; margin-top: 24px;
  }
  .overwrite-actions button {
    font-size: 14px; font-weight: 500; padding: 10px 24px; border-radius: 4px;
    cursor: pointer; font-family: inherit;
  }
  .overwrite-cancel {
    background: white; color: #18181B; border: 1px solid #18181B;
  }
  .overwrite-cancel:hover { background: #F4F4F5; }
  .overwrite-confirm {
    background: white; color: #18181B; border: 1px solid #E4E4E7;
  }
  .overwrite-confirm:hover { background: #F4F4F5; }

  /* 生成中ローディング */
  .generate-btn.loading {
    pointer-events: none; opacity: 0.7;
  }
  .generate-btn.loading::after {
    content: ' 生成中...';
  }
  .generate-cancel {
    display: none; font-size: 13px; color: #DC2626; background: none;
    border: 1px solid #DC2626; border-radius: 4px; padding: 6px 12px;
    cursor: pointer; font-family: inherit; margin-left: 8px;
  }
  .generate-cancel.visible { display: inline-block; }

  .step-content.generating { pointer-events: none; opacity: 0.6; }
  .step-content.generating .ai-block { pointer-events: auto; opacity: 1; }

  /* ストリーミング プログレスバー */
  .gemini-progress {
    margin-top: 16px; display: none;
    background: #F0FDFA; border: 1px solid #99F6E4; border-radius: 10px;
    padding: 14px 16px;
  }
  .gemini-progress.visible { display: block; }
  .gemini-progress-bar {
    height: 10px; background: #E4E4E7; border-radius: 5px; overflow: hidden;
  }
  .gemini-progress-fill {
    height: 100%; border-radius: 5px; width: 0%; transition: width 0.3s ease;
    background: linear-gradient(90deg, #0D9488, #06B6D4, #0D9488);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .gemini-progress-info {
    display: flex; justify-content: space-between; margin-top: 8px;
    font-size: 13px; font-weight: 500; color: #0D9488;
  }

  /* プロンプト編集エリア */
  .prompt-toggle {
    font-size: 12px; color: #71717A; cursor: pointer; margin-top: 8px;
    display: inline-block; text-decoration: underline;
  }
  .prompt-area {
    display: none; margin-top: 8px;
  }
  .prompt-area.visible { display: block; }
  .prompt-textarea {
    width: 100%; min-height: 120px; font-size: 12px; font-family: monospace;
    padding: 8px; border: 1px solid #E4E4E7; border-radius: 4px;
    resize: vertical; box-sizing: border-box; line-height: 1.5;
    color: #18181B; background: #FAFAFA;
  }


  /* やさしい日本語トグル */
  .btn-easy-toggle {
    font-size: 12px; font-weight: 600; padding: 4px 10px;
    border-radius: 20px; cursor: pointer; font-family: inherit;
    border: 1.5px solid #009FA8; background: white; color: #009FA8;
    transition: all 0.2s; white-space: nowrap;
  }
  .btn-easy-toggle:hover { background: #F0FDFA; }
  .btn-easy-toggle.active {
    background: #009FA8; color: white; border-color: #009FA8;
  }

  @media (max-width: 639px) {
    .btn-easy-toggle { font-size: 11px; padding: 3px 8px; }
    #birthdateWareki { flex-wrap: wrap; }
    #birthdateWareki select { min-width: 60px; }
    #birthdateWareki input { width: 60px; }
  }

  /* バリデーションエラー */
  .validation-error {
    outline: 2px solid #EF4444; outline-offset: 2px; border-radius: 4px;
  }

/* ============================================================
   プロトタイプ専用上書き（既存create.html非改変・ここだけ追加）
   ============================================================ */
body { visibility: visible !important; }
.proto-banner {
  background: #FEF3C7; border-bottom: 1px solid #FCD34D; color: #92400E;
  padding: 8px 16px; font-size: 13px; text-align: center; font-weight: 500;
}
.facility-context {
  margin: 16px 0 0; font-size: 13px; font-weight: 600; color: #009FA8;
}
.facility-context:empty { display: none; }
/* box-tag: 理想デザインには無いため非表示。ただしE2Eが現在ステップ判定に
   textContent('②'/'L4'等)で参照するため要素はDOMに残す（削除すると14箇所即死）。 */
.box-tag { display: none; }
.field-block { margin-top: 28px; }
.field-block:first-child { margin-top: 0; }
.field-label {
  font-size: 16px; font-weight: 600; color: #18181B;
  margin-bottom: 4px; line-height: 1.4;
}
/* reveal（選択時に展開する子フィールド群）。理想デザイン .reveal 準拠:
   左border3px青・薄青背景・右角丸・内側padding。 */
.reveal-block {
  margin-top: 14px;
  border-left: 3px solid var(--blue); background: #F8FAFF;
  border-radius: 0 12px 12px 0; padding: 14px 16px;
}
/* reveal見出し（理想 .rh: 青・小・太字） */
.reveal-block .field-label {
  font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 10px;
}
/* reveal内の選択肢はチップ(pill)化。トップレベルのカード化(.radio-list > div)を
   より高詳細度で上書きする。E2E .check() 互換のため input は opacity:0 でチップ全面を
   覆い、クリック可能性を維持する（display:none にしない）。 */
.reveal-block .radio-list, .reveal-block .check-list {
  flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 0;
}
.reveal-block .radio-list > div, .reveal-block .check-list > div {
  border: 1.5px solid var(--border); border-radius: 20px; background: #fff;
}
/* C2症状のように人体図(bodypicker)を内包する選択肢は、pill横並びから外して
   全幅に改行展開する。pill用 flex-direction:row の兄弟並びに人体図が巻き込まれ
   4列に潰れる崩れ（UX-2）を防ぐ。ラベルはpillのまま、人体図は下に全幅で開く。 */
.reveal-block .check-list > div:has([data-bp-name]) {
  flex-basis: 100%;
}
.reveal-block .check-list > div:has([data-bp-name]) > label {
  display: inline-flex;
}
.reveal-block .radio-list > div > label, .reveal-block .check-list > div > label {
  position: relative;
  padding: 8px 14px; font-size: 13px; font-weight: 500; gap: 0;
}
.reveal-block .radio-list > div:has(> label > input:checked) > label,
.reveal-block .check-list > div:has(> label > input:checked) > label {
  color: var(--blue); font-weight: 600;
}
.reveal-block .radio-list > div > label > input[type="radio"],
.reveal-block .check-list > div > label > input[type="checkbox"] {
  position: absolute; inset: 0; transform: none;
  width: 100%; height: 100%; border: none; border-radius: inherit;
  background: transparent; opacity: 0;
}
.reveal-block .radio-list > div > label > input:checked::after { content: none; }
/* 「その他」自由記述（理想 .other-text: 角丸10px・幅いっぱい） */
.other-text {
  margin-top: 12px; width: 100%; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; font-size: 14px;
}
/* BodyPicker読込エラー時のフォールバック枠（理想 bodyPH: slate系グレー・角丸10px）。
   本番で見える人体図は BodyPicker 本体が描画（不変）。 */
.bodypicker-ph {
  background: #F1F5F9; border-radius: 10px;
  padding: 28px 16px; text-align: center; color: #94A3B8;
  font-size: 13px; margin-top: 8px;
}
.summary-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 16px; }
.summary-table th {
  text-align: left; padding: 8px 12px; background: #F4F4F5;
  color: rgba(24,24,27,0.6); font-weight: 500; width: 200px;
  border: 1px solid #E4E4E7; vertical-align: top; white-space: nowrap;
}
.summary-table td { padding: 8px 12px; color: #18181B; border: 1px solid #E4E4E7; }
/* debug-bar は利用者名含む全回答を可視化する開発用バー。本番では患者個人情報の露出に
   なるため、既定で display:none とし、stg/local 環境でのみ flow-renderer.js が表示する。
   本番ではJSが一切触らないため永久に非表示（PIIをDOMにも入れない）。 */
.debug-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #18181B; color: #A1A1AA; font-size: 11px;
  padding: 6px 12px; font-family: monospace; line-height: 1.5;
  max-height: 72px; overflow: auto; z-index: 50;
}