/* =========================================================================
   parts.css — 商談受付タブレットの画面固有の部品
   ------------------------------------------------------------------------
   ★tokens の var(--…) だけを使う（余白は --s1〜7・角丸は --r-*・影は --shadow-*・z は --z-*）
   ★iPad で指で押すアプリなので、押せる所はすべての幅で 44px 以上（発注者の指定 2026-10-06）。
     器の既定（PC のボタン 40px・_裁定表 §5 #2）より、この案件の指定を優先する。高さは 44/48/52 の段だけ使う
   ★ブレイクポイントは 767 / 1023 / 1439 だけ（iPad 縦 820・834 は「〜1023」、横 1180・1194 は「1024〜」）
   ========================================================================= */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.me-text { min-width: 0; }
.me-name { display: block; }

/* ---- 押せる大きさ（全幅）---- */
.btn { height: 44px; }
.btn--sm { height: 44px; padding: 0 var(--s3); font-size: var(--fs-body); }
.btn--icon { width: 44px; }
.btn--icon.btn--sm { width: 44px; }
.btn--lg { height: 52px; padding: 0 var(--s5); font-size: var(--fs-h3); }
.input, .select { height: 44px; font-size: var(--fs-h3); }
textarea.input { font-size: var(--fs-h3); }
.chip { height: 44px; padding: 0 var(--s4); font-size: var(--fs-body); }
.shell-side .nav-item { height: 44px; }
.segmented button { height: 44px; padding: 0 var(--s4); font-size: var(--fs-body); }
.check input { width: 24px; height: 24px; }
.link-btn {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s2);
  background: none; border: 0; color: var(--brand-fg); font: inherit; font-weight: 700; cursor: pointer;
  border-radius: var(--r-sm);
}
.link-btn:hover { background: var(--brand-tint); }
.link-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }

/* ---- トップバー: 電波と未送信 ---- */
.netbadge {
  display: inline-flex; align-items: center; gap: var(--s2); height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-label); font-weight: 700; color: var(--ok); white-space: nowrap;
}
.netbadge svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.netbadge.is-off { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }
.netbadge.is-pending { color: var(--info); background: var(--info-soft); border-color: var(--info-soft); }
.netbadge.is-stuck { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }

/* ---- 知らせの帯（ホーム・商談の上） ---- */
.notice {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  margin-bottom: var(--s4); font-size: var(--fs-body);
}
.notice svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.notice .grow { flex: 1; min-width: 0; }
.notice--info { background: var(--info-soft); border-color: var(--info-soft); color: var(--info); }
.notice--warn { background: var(--warn-soft); border-color: var(--warn-soft); color: var(--warn); }
.notice--danger { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }
.notice--ok { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok); }
.notice b { font-weight: 700; }
.notice .ink { color: var(--ink); }

/* ---- ホーム ---- */
.kpi .k-sub { display: block; margin-top: var(--s2); font-size: var(--fs-label); color: var(--ink-mute); }
.case-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.case-card { display: flex; flex-direction: column; gap: var(--s3); min-height: 168px; color: inherit; }
.case-card .co { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); }
.case-card .who { font-size: var(--fs-sub); color: var(--ink-sub); }
.case-card .foot { margin-top: auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.progress { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pstep {
  display: inline-flex; align-items: center; gap: var(--s1); height: 28px; padding: 0 var(--s2);
  border-radius: var(--r-sm); background: var(--surface-sub); color: var(--ink-mute);
  font-size: var(--fs-label); font-weight: 700; white-space: nowrap;
}
.pstep svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.pstep.is-done { background: var(--ok-soft); color: var(--ok); }
.pstep.is-part { background: var(--info-soft); color: var(--info); }
.section { margin-top: var(--s7); }
.section-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.section-head h2.section-title { margin-bottom: 0; }
.section-head .spacer { margin-left: auto; }

/* ---- 一覧（表） ---- */
.toolbar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-bottom: var(--s4); }
.toolbar .search { flex: 1; min-width: 240px; }
.count-line { font-size: var(--fs-sub); color: var(--ink-sub); margin-bottom: var(--s3); }
.table td a.rowlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--brand-fg); }

/* ---- 商談の記録: 上の段・タブ ---- */
.case-head .meta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); font-size: var(--fs-sub); color: var(--ink-sub); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); margin-bottom: var(--s5); }
.steps button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s1);
  min-height: 64px; padding: var(--s2); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-sub); font: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer;
}
.steps button .st { font-size: var(--fs-caption); font-weight: 500; color: var(--ink-mute); }
.steps button[aria-selected="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-fg); }
.steps button[aria-selected="true"] .st { color: var(--brand-fg); }
.panel-pane { display: block; }
.form-col { display: flex; flex-direction: column; gap: var(--s5); max-width: 900px; }
.field .hint { font-size: var(--fs-label); }
.big-text { min-height: 200px; }
.form-actions {
  display: flex; gap: var(--s3); align-items: center; flex-wrap: nowrap;   /* 段の行き来のボタン。折り返さない（行の高さを跳ねさせない） */
  padding: var(--s4) 0 0; border-top: 1px solid var(--border); margin-top: var(--s5);
}
.saved-line { font-size: var(--fs-label); color: var(--ink-mute); }

/* 大きな候補ボタン（聞き取り・依頼の選択肢） */
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 52px; padding: 0 var(--s4);
  border: 1px solid var(--border-control); border-radius: var(--r-md); background: var(--surface);
  color: var(--ink); font: inherit; font-size: var(--fs-body); font-weight: 700; cursor: pointer; text-align: left;
}
.choice svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; flex: none; opacity: 0; }
.choice[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-fg); }
.choice[aria-pressed="true"] svg { opacity: 1; }
.choice-group + .choice-group { margin-top: var(--s3); }
.choice-group .gname { font-size: var(--fs-label); font-weight: 700; color: var(--ink-mute); margin-bottom: var(--s2); }

/* 同意の枠（録音・撮影） */
.consent { border: 1px solid var(--brand-soft); background: var(--brand-tint); border-radius: var(--r-lg); padding: var(--s5); }
.consent .say { font-size: var(--fs-h3); line-height: var(--lh-body); color: var(--ink); margin: var(--s3) 0 var(--s4); max-width: 46em; }
.consent .who { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s4); }
.consent .who .field { min-width: 260px; }
.consent-done { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-sub); color: var(--ink-sub); }

/* 写真 */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.photo { position: relative; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-sub); }
.photo .ph-foot { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); }
.photo .ph-foot .badge { margin-right: auto; }
.shoot-row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin: var(--s4) 0; }
.review-img { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto; border-radius: var(--r-md); border: 1px solid var(--border); }

/* 録音 */
.recbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: var(--s4);
}
.recbar.is-rec { border-color: var(--danger); background: var(--danger-soft); }
.recdot { width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--danger); flex: none; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.rec-time { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-h2); font-weight: 700; color: var(--danger); }
.rec-files { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.rec-file { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-sub); }
.rec-file audio { height: 44px; max-width: 100%; }
.qcard + .qcard { margin-top: var(--s4); }
.qcard .q-ask { font-size: var(--fs-h2); font-weight: 700; margin: var(--s1) 0 var(--s2); }
.qcard .q-hint { font-size: var(--fs-sub); color: var(--ink-sub); margin-bottom: var(--s4); }
.qcard .q-mark { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); font-size: var(--fs-sub); color: var(--ink-sub); }

/* ご確認（担当者の画面の入口） */
.gate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.gate-card { display: flex; flex-direction: column; gap: var(--s3); }
.gate-card .g-title { font-size: var(--fs-h3); font-weight: 700; }
.gate-card .g-state { font-size: var(--fs-sub); color: var(--ink-sub); }
.gate-card .btn { margin-top: auto; }

/* 取り込み */
.import-preview dl { display: grid; grid-template-columns: 9em 1fr; gap: var(--s2) var(--s4); }
.import-preview dt { font-size: var(--fs-label); font-weight: 700; color: var(--ink-mute); }
.import-preview dd { font-size: var(--fs-body); }
.scan-video { display: block; width: 100%; max-height: 50vh; background: var(--ink); border-radius: var(--r-md); object-fit: cover; }

/* 送信の状況 */
.qstate { display: inline-flex; }

/* 設定 */
.member-add { display: grid; grid-template-columns: 1fr 1fr 160px auto; gap: var(--s3); align-items: end; }

/* ---- ログイン・お客さまに見せる画面（器のシェル無し） ---- */
.solo { max-width: 1120px; margin: 0 auto; padding: var(--s6); padding-bottom: calc(var(--s7) * 3); }
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); }
.login-card { width: min(480px, 100%); }
.login-card h1 { font-size: var(--fs-h1); font-weight: 700; margin-bottom: var(--s2); }
.login-card .lead { color: var(--ink-sub); font-size: var(--fs-sub); margin-bottom: var(--s5); }
.login-card form { display: flex; flex-direction: column; gap: var(--s4); }
.dev-code { font-family: var(--font-num); font-size: var(--fs-kpi); font-weight: 800; letter-spacing: .08em; color: var(--brand-fg); }
.code-input { font-family: var(--font-num); font-size: var(--fs-h2); letter-spacing: .3em; text-align: center; }

.show-head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s5); }
.show-head .t { flex: 1; min-width: 0; }
.show-head .co { font-size: var(--fs-sub); color: var(--ink-sub); }
.show-head h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-tight); margin-top: var(--s1); }
.show-head .lead { font-size: var(--fs-h3); color: var(--ink-sub); margin-top: var(--s2); line-height: var(--lh-body); }
.backhold { flex: none; }
.backhold.is-holding { background: var(--brand-tint); border-color: var(--brand); }
.show-block { margin-bottom: var(--s5); }
.show-block h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: var(--s3); }
.show-foot {
  border-top: 1px solid var(--border); padding: var(--s5) 0 0; display: flex; flex-direction: column; gap: var(--s3);
}
.show-foot .row { flex-wrap: wrap; }
.agree-note { font-size: var(--fs-body); color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: var(--s3) var(--s4); }
.ng-note { display: flex; flex-direction: column; gap: var(--s2); }

/* 流れ図: 横（1024px〜）はレーンの表・縦（〜1023px）は番号つきの並び */
.flow-grid { display: grid; gap: var(--s2); align-items: stretch; overflow-x: auto; padding-bottom: var(--s2); }
.flow-lane { display: flex; align-items: center; padding: var(--s2) var(--s3); background: var(--surface-sub); border-radius: var(--r-sm); font-size: var(--fs-label); font-weight: 700; color: var(--ink-sub); }
.flow-row { background: var(--surface-hover); border-radius: var(--r-sm); }
.flow-box {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1);
  min-height: 88px; padding: var(--s2) var(--s3); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-body); text-align: left; line-height: var(--lh-heading);
}
button.flow-box { cursor: pointer; }
.flow-box .n { font-family: var(--font-num); font-size: var(--fs-label); font-weight: 800; color: var(--brand-fg); }
.flow-box .lane-tag { font-size: var(--fs-caption); color: var(--ink-mute); }
.flow-box .next { font-size: var(--fs-caption); color: var(--ink-mute); }
.flow-box.start, .flow-box.end { border-color: var(--brand-soft); background: var(--brand-tint); }
.flow-box.decision { border-style: dashed; }
.flow-box.is-ng { border: 2px solid var(--danger); background: var(--danger-soft); }
.flow-box .ngtag { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s2); border-radius: var(--r-sm); background: var(--danger); color: var(--on-danger); font-size: var(--fs-label); font-weight: 700; }
.flow-list { display: none; flex-direction: column; gap: var(--s2); }
.flow-list .flow-box { min-height: 64px; width: 100%; flex-direction: row; align-items: center; gap: var(--s3); }
.flow-list .flow-box .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
@media (max-width: 1023px) {
  .flow-grid { display: none; }
  .flow-list { display: flex; }
}

/* 設計カード（お客さま向けの表） */
.ctable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.ctable th { text-align: left; font-size: var(--fs-label); font-weight: 700; color: var(--ink-sub); background: var(--surface-sub); padding: var(--s3); border-bottom: 1px solid var(--border); }
.ctable td { padding: var(--s3); border-bottom: 1px solid var(--border); font-size: var(--fs-body); vertical-align: middle; }
.ctable tr:last-child td { border-bottom: 0; }
.ctable td.c, .ctable th.c { text-align: center; }
.ctable tr.is-ng td { background: var(--danger-soft); }
.ctable .rowpick { min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); font: inherit; font-weight: 700; background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left; padding: 0; }
.ctable .rowpick svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.mk { display: inline-flex; align-items: center; justify-content: center; min-width: 4.8em; height: 28px; padding: 0 var(--s2); border-radius: var(--r-sm); font-size: var(--fs-label); font-weight: 700; }
.mk.yes { background: var(--ok-soft); color: var(--ok); }
.mk.no { background: var(--neutral-soft); color: var(--neutral); }
.mk.q { background: var(--warn-soft); color: var(--warn); }
.ctable th { white-space: nowrap; }
.mk { white-space: nowrap; }
.opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.opt-card { display: flex; flex-direction: column; gap: var(--s2); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.opt-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--border); display: block; }
.opt-card[aria-pressed="true"] { border-color: var(--brand); box-shadow: var(--shadow-lg); }
.shots { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s4); align-items: start; }
.shots figure { margin: 0; }
.shots img { width: 100%; display: block; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.shots figcaption { font-size: var(--fs-label); color: var(--ink-mute); margin-top: var(--s2); }
.verdicts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.verdicts .choice { min-height: 64px; justify-content: center; text-align: center; }

@media (max-width: 1023px) {
  .gate-cards { grid-template-columns: 1fr; }
  .member-add { grid-template-columns: 1fr 1fr; }
  .shots { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .opt-cards, .verdicts { grid-template-columns: 1fr; }
  .member-add { grid-template-columns: 1fr; }
  .import-preview dl { grid-template-columns: 1fr; }
  .solo { padding: var(--s4); }
  .show-head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .recdot { animation: none; } }

/* ---- 見出しと値の並び（設定・開示・確かめる） ---- */
.kv { display: grid; grid-template-columns: 11em 1fr; gap: var(--s2) var(--s4); margin-bottom: var(--s4); }
.kv dt { font-size: var(--fs-label); font-weight: 700; color: var(--ink-mute); padding-top: var(--s1); }
.kv dd { font-size: var(--fs-body); min-width: 0; overflow-wrap: anywhere; }
.kv dd.pre { white-space: pre-wrap; }
.chip--static { cursor: default; height: 32px; }
.modal--wide { width: min(1080px, 100%); }
.updbar { margin-bottom: var(--s4); }

/* ---- ログイン ---- */
.login-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); font-size: var(--fs-h3); font-weight: 700; color: var(--brand-fg); }
.login-foot { margin-top: var(--s5); }


/* ---- 写真の切り取り・塗りつぶし ---- */
.pe { display: flex; flex-direction: column; gap: var(--s3); }
.pe-guide { font-size: var(--fs-body); }
.pe-tools { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pe-stage { background: var(--surface-sub); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s2); display: grid; place-items: center; }
.pe-canvas { display: block; max-width: 100%; max-height: 58vh; touch-action: none; cursor: crosshair; }
.pe-ok { font-weight: 700; }

/* ---- お客さまに見せる画面 ---- */
.who-block .check { min-height: 44px; }

/* 単独で置く線画アイコン（文字の横に置く。大きさを必ず持たせる） */
svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; }
.qcard .field { margin-top: var(--s4); }
.card-title + .sub { margin: var(--s1) 0 var(--s4); }
.consent-done { margin-bottom: var(--s4); }

.show-block .verdicts + .sub, .show-block .choices, .show-block .field { margin-top: var(--s3); }
.show-block .kv { margin-top: var(--s4); }
/* iPad 縦（〜1023px）: お客さまに見せる表の列を詰めて、横に流さずに収める */
@media (max-width: 1023px) {
  .ctable th, .ctable td { padding: var(--s2); }
  .ctable .mk { min-width: 0; padding: 0 var(--s1); }
  .ctable .rowpick { gap: var(--s1); }
}

/* =========================================================================
   UX 精査の直し（2026-10-07）
   ========================================================================= */
.row .grow, .runner-card .grow { flex: 1; min-width: 0; }
.autosave { display: flex; align-items: center; gap: var(--s2); color: var(--ink-sub); }
.consent-done { flex-wrap: wrap; }
.proxy-chk { min-height: 44px; font-size: var(--fs-sub); width: 100%; }
.pe-ok { min-height: 44px; }
.btn.is-off { opacity: .55; cursor: default; }
.practice-card { margin-top: var(--s4); }
.practice-card .row { margin-top: var(--s2); }
.practice-row { margin-top: var(--s3); }
.gate-note textarea { min-height: 72px; }
.login-help { margin-top: var(--s3); }

/* 今日やること（§7） */
.todo-list { display: flex; flex-direction: column; gap: var(--s3); }
.todo { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); }
.todo .grow { flex: 1; min-width: 0; }
.todo--trouble { border-color: var(--danger); }
.todo--trouble .ic { color: var(--danger); }
.todo--contract .ic { color: var(--warn); }

/* 商談の記録: 段の切り替えと「次へ／締める」を下に固定（中6） */
.casebar {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s6); padding: var(--s3) 0; background: var(--bg); border-top: 1px solid var(--border);
}
.casebar__tabs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s2); }
.casebar__tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  min-height: 52px; padding: var(--s1); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-sub); font: inherit; font-size: var(--fs-sub); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.casebar__tabs .st { font-size: var(--fs-caption); font-weight: 500; color: var(--ink-mute); }
.casebar__tabs button[aria-selected="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-fg); }
.casebar__tabs button[aria-selected="true"] .st { color: var(--brand-fg); }
.casebar__act { flex: none; }
@media (max-width: 767px) {
  .casebar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .casebar__act { width: 100%; }
  .casebar__act .btn { width: 100%; }
}

/* 録音中の帯はスクロールしても見える（中5） */
.recbar.is-rec { position: sticky; top: calc(var(--topbar-h) + var(--s2)); z-index: 2; box-shadow: var(--shadow-md); }

/* ---- お客さまに見せる画面（H6: 50〜70cm 離れて見る文字。器は変えず、この画面でだけ値を大きくする） ---- */
body.is-show {
  --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 22px; --fs-body: 20px; --fs-sub: 20px; --fs-label: 16px; --fs-caption: 16px;
}
/* 流れ図: 1箱が狭くなる（横向き 1180 で6箱など）ときは、番号つきの並びで見せる（show.js の placeGrid が .use-list を付ける・独立検証 低） */
.is-show .show-block.use-list .flow-grid { display: none; }
.is-show .show-block.use-list .flow-list { display: flex; }
.is-show .flow-box .lane-tag, .is-show .flow-box .next { font-size: var(--fs-label); }
.is-show .show-head { padding-right: calc(var(--s7) * 6); }
.is-show .say { font-size: var(--fs-h3); line-height: var(--lh-body); color: var(--ink); margin-bottom: var(--s3); max-width: 46em; }
.is-show .btn { height: 52px; }
.is-show .choice { min-height: 64px; }
.is-show .verdicts .choice { min-height: 72px; }
.is-show .consent-sec .verdicts { margin-top: var(--s4); }
.is-show .flow-box { min-height: 104px; }
.is-show .flow-list .flow-box { min-height: 72px; }
.flow-box.is-pickable { cursor: pointer; border-color: var(--brand); }
.flow-more { margin-bottom: var(--s2); }
.rowname { font-weight: 700; }
.show-foot { position: sticky; bottom: 0; z-index: 2; background: var(--bg); padding: var(--s3) 0; }
/* 押す前に読む文は、お客さまの距離でも読める大きさ（本文と同じ 20px・独立検証 H6 の積み残し）。帯が高くなりすぎないよう余白は詰める */
.show-foot .agree-note { font-size: var(--fs-body); line-height: 1.55; padding: var(--s2) var(--s3); margin-bottom: var(--s2); }
.show-foot .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.show-foot .row.two .btn { width: 100%; }
.show-foot .row .btn--lg { min-width: 50%; }
.foot-sum { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: var(--fs-sub); }
.practice-band {
  position: sticky; top: 0; z-index: 2; margin: calc(var(--s6) * -1) calc(var(--s6) * -1) var(--s4);
  padding: var(--s3) calc(var(--s7) * 6) var(--s3) var(--s6); background: var(--warn-soft); color: var(--warn); font-weight: 700;
}

/* 右上の「担当者に戻す」（長押し 1.5秒。営業ランナーと同じ位置・同じ時間・H7） */
.holdback {
  position: fixed; top: var(--s3); right: var(--s3); z-index: var(--z-topbar);
  min-width: 168px; height: 64px; padding: 0 var(--s4); overflow: hidden;
  border: 2px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-md);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.holdback__fill { position: absolute; inset: 0; background: var(--brand-soft); transform-origin: left center; transform: scaleX(0); }
.holdback__label { position: relative; display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-label); }
.holdback__label svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.holdback__label small { font-size: var(--fs-caption); font-weight: 500; color: var(--ink-sub); }
.holdback.is-holding { border-color: var(--brand); }
.holdback__hint {
  position: fixed; top: calc(var(--s3) + 72px); right: var(--s3); z-index: var(--z-topbar); max-width: 320px;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--ink); color: var(--surface); font-size: var(--fs-label);
}
@media (max-width: 767px) {
  .is-show .show-head { padding-right: 0; padding-top: calc(var(--s7) * 2); }
  .show-foot .row.two { grid-template-columns: 1fr; }
}

/* =========================================================================
   商談体験の設計（2026-10-07 夜・docs/商談体験_FDE価値_20261007.md §6）
   ========================================================================= */
/* 今日の手順（7つ・自動で進む）。縦持ちで入りきらないときは横にずらせる1行 */
.flowsteps { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s4); padding: var(--s2) 0; overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.flowsteps__label { flex: none; font-size: var(--fs-label); font-weight: 700; color: var(--ink-sub); }
.flowsteps__list { display: flex; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.flowstep {
  display: flex; align-items: center; gap: var(--s2); min-height: 52px; padding: var(--s1) var(--s3); white-space: nowrap;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink-sub); font: inherit; cursor: pointer; text-align: left;
}
.flowstep__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--surface-sub); font-weight: 700; color: var(--ink-sub); }
.flowstep__n svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.flowstep__t { display: flex; flex-direction: column; line-height: 1.25; }
.flowstep__t b { font-size: var(--fs-sub); color: var(--ink); }
.flowstep__t small { font-size: var(--fs-caption); color: var(--ink-mute); }
.flowstep.is-done .flowstep__n { background: var(--ok-soft, var(--brand-tint)); color: var(--ok, var(--brand-fg)); }
.flowstep.is-current { border-color: var(--brand); background: var(--brand-tint); }
.flowstep.is-current .flowstep__n { background: var(--brand); color: var(--surface); }

/* 手順③の案内・次の一手 */
.guide-list { margin: 0 0 var(--s3); padding-left: var(--s5); line-height: 1.7; }
.guide-list li { margin-bottom: var(--s2); }
.guide-photo { margin: 0; }
.next-step { margin-top: var(--s3); }
.next-step .btn { white-space: normal; height: auto; min-height: 44px; text-align: left; }
.rec-warn { color: var(--danger); }
.from-runner { margin: 0 0 var(--s1); color: var(--brand-fg); }
.shoot-why { margin: 0 0 var(--s2); }
.answers > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.answers .kv { margin-top: var(--s2); }
.err-inline { color: var(--danger); font-size: var(--fs-sub); }

/* まとめの段（担当者） */
.sum-next .row { align-items: center; }
.sum-date { max-width: 220px; min-height: 44px; }
.sum-go { margin: var(--s4) 0; align-items: center; }
.sum-preview { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--s4); background: var(--bg); }
.sum-preview .show-block { margin-bottom: var(--s3); }

/* 今日のまとめ（お客さまに見せる画面とプレビューで同じ部品） */
.sum-view .sum-card { margin-bottom: var(--s4); }
.sum-words { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; }
.sum-words dt { font-weight: 700; color: var(--ink-sub); font-size: var(--fs-label); padding-top: var(--s1); }
.sum-words dd { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-body); color: var(--ink); }
.sum-time { margin: var(--s3) 0 0; font-size: var(--fs-body); }
.sum-time .sub { margin-left: var(--s2); }
.sum-kept { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s3); font-size: var(--fs-body); }
.sum-kept li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.sum-kept li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.sum-thumbs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sum-thumb { width: auto; height: 80px; max-width: 120px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); }
.sum-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s4); }
.sum-step { display: flex; gap: var(--s3); align-items: flex-start; }
.sum-step__n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--brand); color: var(--surface); font-weight: 800; font-size: var(--fs-body); }
.sum-step__t { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-body); line-height: var(--lh-body); }
.sum-step__t b { font-size: var(--fs-h3); }
.sum-foot { font-size: var(--fs-body); color: var(--ink-sub); margin: var(--s2) 0 var(--s6); }
.is-show .sum-thumb { height: 96px; max-width: 120px; }
@media (max-width: 767px) {
  .sum-words { grid-template-columns: 1fr; }
}
/* 押す物が無い画面（今日のまとめ・ありがとう）では、下の帯そのものを出さない（空の帯が中身に重ならない） */
.show-foot:empty { display: none; }

/* =========================================================================
   ai-71 再精査（2026-10-07 朝）の直し
   ========================================================================= */
/* H3 同意: 結論の問い → すぐ下にボタン → 理由は「くわしく」に畳む */
.is-show .ask { font-size: var(--fs-h2); font-weight: 700; line-height: 1.4; color: var(--ink); margin: 0 0 var(--s4); }
.is-show .consent-sec h2 { font-size: var(--fs-h3); color: var(--ink-sub); margin-bottom: var(--s2); }
details.more { margin-top: var(--s4); }
details.more > summary {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--s3); cursor: pointer; font-weight: 700; color: var(--brand-fg);
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: '＋'; margin-right: var(--s2); }
details.more[open] > summary::before { content: '－'; }
details.more[open] > summary { margin-bottom: var(--s3); }
.foot-hint { margin: 0; font-size: var(--fs-body); color: var(--ink-sub); }

/* 中4: 確認A/B の下の帯は1行とボタンだけ（140px 以下）。全文は本文の終わりの「くわしく」 */
.show-foot { padding: var(--s2) 0; }
.show-foot .agree-note--short { margin: 0; padding: 0; border: 0; background: none; line-height: 1.4; }
.show-foot .foot-sum { margin: 0 0 var(--s2); }
.agree-more { margin-top: var(--s4); }

/* 中2: 撮影で「AI に読ませない」「撮影しない」の商談は、営業ランナーで写真を撮らない（いつも赤字） */
.red-runner { margin-bottom: var(--s3); }
.red-runner-step { color: var(--danger) !important; font-weight: 700; }

/* 中1: 戻った直後の1枚目（お客さまに見られてもよい中身だけ・後ろの画面を隠す） */
.returned { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; background: var(--bg); padding: var(--s5); }
.returned__card { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; max-width: 520px; }
.returned__card .ic { width: 56px; height: 56px; stroke: var(--ok); fill: none; stroke-width: 2.5; }
.returned__card h2 { font-size: var(--fs-h1); margin: 0; }
.returned__next { font-size: var(--fs-h3); color: var(--ink-sub); margin: 0 0 var(--s3); }

/* 中3: 縦持ち（〜1023px）は今日の手順を2段に折る（切れない） */
@media (max-width: 1023px) {
  .flowsteps { flex-wrap: wrap; overflow-x: visible; }
  .flowsteps__label { width: 100%; }
  .flowsteps__list { flex-wrap: wrap; }
  .flowstep { min-height: 48px; }
  /* 中5: 縦持ちの下の段は副文字を出さない（段の名だけ） */
  .casebar__tabs .st { display: none; }
}

/* 中6: 今日のまとめ — 行の見出しは 20px の濃い色・横持ちは2列で1画面に・担当 */
.sum-words dt { font-size: var(--fs-body); color: var(--ink); }
.sum-staff { margin: var(--s4) 0 0; font-size: var(--fs-body); color: var(--ink); }
@media (min-width: 1024px) {
  /* 横持ち: 左に「伺ったお言葉」と「お預かりした物」、右に「このあと」と下の1行。1画面に収まるよう余白と字を少し詰める（本文 20px は保つ） */
  .is-show .sum-view { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "a c" "b c" "b f"; column-gap: var(--s4); row-gap: var(--s3); align-items: start; }
  .is-show .sum-view > .sum-card { margin-bottom: 0; padding: var(--s4) var(--s5); }
  .is-show .sum-view > :nth-child(1) { grid-area: a; }
  .is-show .sum-view > :nth-child(2) { grid-area: b; }
  .is-show .sum-view > :nth-child(3) { grid-area: c; }
  .is-show .sum-view > .sum-foot { grid-area: f; margin: 0; }
  .is-show .sum-card h2 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
  .is-show .sum-words { gap: var(--s1) var(--s4); }
  .is-show .sum-words dd { font-size: var(--fs-body); line-height: 1.45; }
  .is-show .sum-time { margin-top: var(--s2); }
  .is-show .sum-kept { gap: var(--s2); }
  .is-show .sum-thumb { height: 64px; }
  .is-show .sum-steps { gap: var(--s3); }
  .is-show .sum-step__t { line-height: 1.45; }
  .is-show .sum-step__t b { font-size: var(--fs-body); }
  .is-show .sum-staff { margin-top: var(--s3); }
  .is-show.is-sum .solo { padding-bottom: var(--s5); }   /* 今日のまとめは下に帯が無いので、下の余白を詰める */
}
/* 問いのすぐ下の1行（同意の決め手・いつも見える） */
.is-show .ask-note { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); margin: 0 0 var(--s4); padding: var(--s2) var(--s3); border-left: 4px solid var(--brand); background: var(--surface-sub); border-radius: var(--r-sm); }
.show-foot .agree-short { font-weight: 400; }