:root {
  /* ブランドパレット（Design System v2 準拠） */
  --green: #6aa55a;       /* アクセント（CTA） */
  --green-dark: #5b914e;  /* アクセント濃いめ（active/グラデ） */
  --green-700: #426e38;   /* 緑文字（タグ等） */
  --green-100: #edf5ea;   /* 緑の淡い背景 */
  --brand: #483f34;       /* メインカラー（ブランド面） */
  --brand-dark: #2f2a24;  /* メイン濃いめ（グラデ用・本文最濃） */
  --eartag: #ffd24d;      /* 耳標カラー（お気に入り★） */
  --photo-mat: #efeade;   /* 写真の台紙（レターボックス部分の暖色トレイ） */
  --ped-badge-w: 54px;    /* 血統チェーンの続柄バッジ幅（縦線の位置もこれを基準に計算） */
  --bg: #f7f8f3;          /* 背景（クリーム） */
  --card: #ffffff;
  --text: #2f2a24;
  --muted: #756e66;
  --border: #e8e3da;      /* カード境界（淡） */
  --border-strong: #d9d4cc; /* 入力境界（やや濃） */

  /* ステータス */
  --danger: #d96a4a;      --danger-bg: #fce9e3;  --danger-ink: #a34a32;
  --warn: #e5a93c;        --warn-bg: #fff3d7;    --warn-ink: #8a611c;
  --info: #5a8fcf;        --info-bg: #eaf2fb;    --info-ink: #3c6797;

  /* 角丸・影 */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius: 16px;
  --shadow-card: 0 8px 24px rgba(72, 63, 52, 0.08);
  --shadow-soft: 0 6px 18px rgba(72, 63, 52, 0.06);
  --shadow-cta: 0 8px 18px rgba(106, 165, 90, 0.28);
  /* LINE共有ボタン（結果画面・紹介シート共用）。ブランド色 #06C755 そのままだと白文字が 2.3:1 で
     屋外で読めないため、色相を保って明度を落とし 4.5:1 近辺にしている（#048a3c=4.46:1） */
  --line-green: #048a3c;
  --line-green-active: #037a35;
}

/* 全体のフォントを大きめに（基準 16px→20px）。UIは全てrem/em基準なので比例拡大する。
   文字サイズ設定(標準125% / 大145%)でこのrootを差し替えると全体が比例拡大する。 */
html { font-size: 125%; }
/* 文字サイズ設定で拡大したとき、px固定の箱が中身をクリップしないよう寸法も引き上げる。
   data-fontscale は app.js と index.html 冒頭のスクリプトが付与する */
html[data-fontscale="145"] { --ped-badge-w: 62px; }

/* ズーム挙動の方針（iOS）: ダブルタップズームだけを無効化し、ピンチズームは残す。
   - 誤ダブルタップで画面全体が拡大し操作不能になる不具合を防ぐ（今回のバグ）
   - ピンチは意図的に残す＝老眼の農家が文字を拡大する手段を確保（Dynamic Type未対応の代替）
   実装: touch-action: manipulation はダブルタップズームのみ無効化しピンチ/スクロール/タップは維持する仕様。
   root(html)に効かせれば子要素の指定に関わらずページ全体でダブルタップズームが無効になる。
   ※viewportには maximum-scale/user-scalable を付けない（付けるとピンチも死ぬため）。
   text-size-adjust はiOSの自動テキスト拡大（意図しない文字サイズ変化）の抑止。 */
html, body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

* { box-sizing: border-box; }

/* 起動スプラッシュ（うしログ） */
#app-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdfbfa; /* ロゴ地色に統一 */
  opacity: 1;
  transition: opacity 0.45s ease;
}
#app-splash.hidden { opacity: 0; pointer-events: none; }
.app-splash-logo {
  width: min(72vw, 360px);
  height: auto;
}

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(106, 165, 90, 0.10), transparent 34%),
    linear-gradient(180deg, #fbfaf6 0%, var(--bg) 34%, #f2efe7 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 18px) 20px 18px;
  text-align: center;
}
.app-header[hidden] { display: none; }
.app-header h1 { margin: 0; font-size: 1.25rem; }
.app-title { display: flex; align-items: center; justify-content: center; gap: 9px; }
.app-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
  background: #fff;
  flex: none;
}

main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}
/* ヘッダー非表示時(TOP以外)は、ステータスバー分の上余白をmainで確保する */
body.no-header main { padding-top: calc(env(safe-area-inset-top) + 10px); }
/* TOP(モード選択)はカードが短くフッターとの間に空白が出るため、mainをflexにして
   カードを縦中央寄せ＝上下の余白を均等化する。空きがない小型端末では自然に上寄せになる
   （flexの余白分配のため）。TOP以外は body.on-top が付かず従来どおり(block/上寄せ)。 */
body.on-top main { display: flex; flex-direction: column; justify-content: center; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

/* 画面切り替え時のふわっとした出現 */
.screen { animation: fade-in 0.22s ease; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen-title {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.01em;
}

/* ── ボタン共通 ── */
.primary-btn {
  width: 100%;
  min-height: 52px;
  padding: 14px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 13px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: transform 0.08s ease, background 0.15s ease;
}
.primary-btn:active { background: var(--green-dark); transform: translateY(1px); }
.primary-btn:disabled { background: #c2cdbe; box-shadow: none; cursor: not-allowed; }

/* 2次アクション（ギャラリー・もう一度話す等）。primaryと同じ高さで押しやすく。 */
.secondary-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  padding: 14px;
  background: #fff;
  color: var(--brand);
  border: 1.5px solid var(--border-strong);
  border-radius: 13px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.secondary-btn:active { background: var(--bg); border-color: var(--green); transform: translateY(1px); }

.link-btn[hidden] { display: none; } /* display:block を hidden 属性で上書きするため明示 */
.link-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 10px 6px;
}

/* 画面タイトル下の説明文（現場で迷わないためのガイド） */
.screen-hint {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* フォーム項目（label + 入力 + ヒント） */
.form-field { margin-bottom: 4px; }
.form-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 8px;
}
.field-hint {
  margin: 8px 2px 0;
  font-size: 0.76rem;
  color: var(--muted);
  min-height: 1.2em;
  transition: color 0.15s ease;
}
.field-hint.ok { color: var(--green-700); font-weight: 700; }
.field-hint.warn { color: var(--warn-ink); font-weight: 700; }

/* ── 撮影チュートリアル（初回オーバーレイ＋「?」で再表示） ── */
.tips-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: 6px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--card);
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 700;
  vertical-align: middle;
  cursor: pointer;
}
.tips-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(47, 42, 36, 0.55);
}
/* display:flex がUAの [hidden]{display:none} を上書きしてしまうため明示的に打ち消す（必須） */
.tips-overlay[hidden] { display: none; }
.tips-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 20px 18px;
}
.tips-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  color: var(--text);
  text-align: center;
}
.tips-list {
  list-style: none;
  counter-reset: tips;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.tips-list li {
  counter-increment: tips;
  position: relative;
  padding-left: 40px;
}
.tips-list li::before {
  content: counter(tips);
  position: absolute;
  left: 0;
  top: 2px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-100);
  color: var(--green-700);
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.9rem;
}
.tips-list strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}
.tips-list span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 2px;
}

/* カメラのスキャンガイド枠（緑のコーナーブラケット。耳標の狙いを助ける） */
.scan-guide {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 19%;
  bottom: 33%; /* 旧: aspect-ratio 3/2 で下端≈38%。下へ5%拡張して33%に */
  pointer-events: none;
  z-index: 2;
  border-radius: 10px;
  /* 枠の外側を暗くして「ここに合わせる」を直感的に。wrapのoverflow:hiddenでクリップされる */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.34);
}
.scan-guide span {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(106, 165, 90, 0.95);
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.35));
}
.scan-guide span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 9px; }
.scan-guide span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 9px; }
.scan-guide span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 9px; }
.scan-guide span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 9px; }

/* ── ① 規約同意（ヒーロー） ── */
.agreement-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
  padding: calc(env(safe-area-inset-top) + 12px) 8px env(safe-area-inset-bottom);
}
/* display:flex が hidden 属性を上書きするため、非表示時は明示的に消す */
.agreement-screen[hidden] { display: none; }
.agree-hero { text-align: center; }
.agree-logo {
  width: 176px;
  height: 176px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}
.agree-wordmark {
  margin: 0;
  line-height: 0;
}
.agree-wordmark img {
  display: block;
  width: 210px;
  max-width: 62vw;
  height: auto;
  margin: 0 auto;
}
.agree-tagline {
  margin: 10px 0 0;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--green-dark);
}
.agree-card {
  width: 100%;
  max-width: 360px;
  padding: 22px 20px;
}
.agree-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.agree-consent input {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  accent-color: var(--green);
}
.agree-consent-text a {
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── ①.5 初回オンボーディング（できること紹介） ── */
/* レイアウトは同意画面と同型（縦中央寄せ・セーフエリア自前管理＝showScreenのno-header除外とセット） */
.onboard-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 文字サイズ「大」(145%)でもCTAを画面内に収めるため、余白は控えめに取る */
  gap: 18px;
  min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
  padding: calc(env(safe-area-inset-top) + 12px) 8px env(safe-area-inset-bottom);
}
/* display:flex が hidden 属性を上書きするため、非表示時は明示的に消す */
.onboard-screen[hidden] { display: none; }
.onboard-hero { text-align: center; }
.onboard-heading {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 800;
  color: var(--text);
}
.onboard-card {
  width: 100%;
  max-width: 360px;
  /* 上下5pxは行側の padding 15px と合算で20px相当にするための値
     （.agree-card の22pxと違い、行区切り線を端まで走らせたいので行側に余白を持たせている） */
  padding: 5px 20px;
}
.onboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
}
.onboard-row + .onboard-row { border-top: 1px solid var(--border); }
/* アイコン箱はrem指定＝文字サイズ設定(標準/大)に追従して行の高さと釣り合いを保つ */
.onboard-icon {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 13px;
  background: var(--green-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: var(--green-700);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onboard-row-text { min-width: 0; }
.onboard-row-title {
  display: block;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text);
  /* 文字サイズ「大」(145%)で2行に折り返すとき「録」1文字だけの孤児行を防ぐ。
     未対応ブラウザでは単に無視される（安全な漸進的強化） */
  text-wrap: balance;
}
.onboard-row-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
/* 権限の事前説明。カードの外に置いて主役(3行)とCTAの間の"but"に見せない＝声を小さくする */
.onboard-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  max-width: 360px;
  margin: -4px 0 0; /* .onboard-screen の gap を詰めてCTAとの一体感を出す */
  padding: 0 4px;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
}
.onboard-note-icon { flex: none; margin-top: 0.15em; }
.onboard-note-icon svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  color: var(--muted); /* インフォアイコンの点は fill:currentColor で塗る */
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.onboard-note strong { color: var(--text); font-weight: 700; }

.onboard-cta { max-width: 360px; }
/* オンボーディング中は「ホーム画面に追加」バナーを出さない（1画面1CTAを守る。app.js showScreen参照） */
body.on-onboard .install-bar { display: none; }

/* 無料トライアル 残り日数バナー */
.free-counter {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 13px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--green-700);
  background: var(--green-100);
  border-radius: 999px;
}
.free-counter:empty { display: none; }

/* ── ペイウォール ── */
.paywall-icon {
  width: 72px;
  height: 72px;
  margin: 4px auto 16px;
  display: grid;
  place-items: center;
  background: var(--green-100);
  border-radius: 50%;
}
.paywall-icon .msr { width: 34px; height: 34px; color: var(--green-dark); } /* 他ページと同じMaterial Symbols */
.paywall-text { font-size: 0.95rem; line-height: 1.8; color: var(--text); margin-bottom: 20px; text-align: center; }
.paywall-note { display: inline-block; margin-top: 6px; font-size: 0.78rem; color: var(--muted); }
/* 自動更新サブスクの開示文＋規約リンク（審査必須・法定の細字）。
   本文拡大(125%)に引きずられないよう絶対pxで固定し、CTAとの間を区切り線で分離 */
.paywall-disclosure {
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.65rem; /* 自動更新の法定開示文。標準サイズで13px相当。文字サイズ設定に追従させる（旧11.5px→13px固定） */
  line-height: 1.7;
  color: var(--muted);
  text-align: left;
}
.paywall-links {
  font-size: 0.65rem; /* 同上 */
  line-height: 1.9;
  margin-bottom: 10px;
  text-align: center;
}
.paywall-links a { color: var(--green-dark); text-decoration: underline; white-space: nowrap; } /* 語中改行を防ぐ */
.paywall-links span { color: var(--muted); margin: 0 6px; }

/* ── ② 検索方法の選択 ── */
/* display:grid がUAの [hidden]{display:none} を上書きしてしまうため明示的に打ち消す（必須）。
   これが無いと、法人分岐画面の #corp-apply-btn（外部購入導線。ストア制度未登録の間は
   フラグOFFで隠す約束）が hidden 属性を無視して出てしまう。 */
.mode-btn[hidden] { display: none; }
.mode-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  width: 100%;
  padding: 15px 16px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.mode-btn:last-child { margin-bottom: 0; }
.mode-btn:active { transform: translateY(1px); background: #fbfaf6; }
.mode-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  background: var(--green-100);
  border-radius: 14px;
}
.mode-label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand);
}
.mode-sub {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}
.mode-btn::after {
  content: "›";
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--border-strong);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}

/* Material Symbols アイコン（インラインSVG・currentColorで着色） */
.msr {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  vertical-align: -0.22em;
  flex: none;
}
.mode-icon .msr { width: 26px; height: 26px; color: var(--green-dark); vertical-align: middle; }
.voice-mic .msr { width: 46px; height: 46px; color: var(--green-dark); vertical-align: middle; }
.history-open-btn .msr,
.share-link .msr,
.primary-btn .msr,
.secondary-btn .msr,
.save-btn .msr,
.csv-btn .msr {
  margin-right: 5px;
}
.msr.rec { color: #e53935; } /* 録音中の赤ドット */
.free-counter .msr { margin-right: 4px; vertical-align: -0.16em; }
.hi-fav .msr, .hi-del .msr { width: 1.3em; height: 1.3em; vertical-align: middle; }

/* ホームの「最近の検索」（最新3件・小さめ表示）。
   モード選択ボタン(白カード)と視覚的に競合させない: カード様式ではなく
   履歴画面(.history-item)と同じ「区切り線のみのフラット行」の語彙に揃える */
.recent-block {
  margin-top: 14px;
  text-align: left;
}
.recent-title {
  margin: 0 0 2px 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
}
.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recent-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 48px; /* 手袋でも押せるタップターゲット */
  padding: 6px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  text-align: left;
  cursor: pointer;
}
.recent-item:active { background: #efe9dd; }
.recent-id {
  grid-column: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.recent-meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.7rem;
  color: var(--muted);
}
.recent-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--border-strong);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

/* 履歴を見るボタン（モード画面） */
.history-open-btn {
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  color: var(--brand);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.history-open-btn:active { background: #f3efe8; }
/* 副次リンク（紹介/レビュー/プラン）を横1行に集約。1〜3個の可変表示に中央寄せで対応 */
.share-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* 文字サイズ切り替え（標準/大）。老眼の農家がピンチせずに拡大できるようにする。
   「N択から1つ選ぶ」の見た目は履歴タブ(.history-tabs)で既に確立しているので、
   新しい慣用句を作らずそちらに揃える（トラック背景＋選択だけ白く浮かせる）。
   .share-row と同じ border-top を持たせ、独立した区画として扱う。
   手袋操作を前提に、どちらも44pt以上を確保する */
.fontsize-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 320pxの狭い端末では折り返してボタン幅を確保する */
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.fontsize-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}
.fontsize-btns {
  display: flex;
  /* 折返し閾値は「2ボタンとも88px(=44ptの倍)を保てる最小幅」から逆算した値。
     88*2 + gap6 + padding8 = 190px。これを切るなら1行に詰めず次の行へ回して、
     手袋でも押せる幅を優先する（3ボタン時代の200pxをそのまま引き継がない） */
  flex: 1 1 190px;
  gap: 6px;
  background: #efe9da;
  padding: 4px;
  border-radius: 12px;
}
.fontsize-btn {
  flex: 1;
  min-height: 44px;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.fontsize-btn.is-sel {
  background: var(--card);
  color: var(--green-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.fontsize-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
/* 各リンク=アイコン上・短ラベル下の縦積み。タップ領域44ptを明示確保（従来の実測≈26px負債を解消）。
   flex:1 + max-width:33% + 親の justify-content:center で 1〜3個いずれも中央に均等配置される。 */
.share-row .share-link {
  flex: 1;
  max-width: 33%;
  flex-direction: column;
  gap: 3px;
  min-height: 44px;
  justify-content: center;
  padding: 6px 4px;
  font-size: 0.72rem;
}
.share-row .share-link .msr { margin-right: 0; width: 1.25em; height: 1.25em; }
/* 基底は見た目のみ（レイアウトは .share-row 側に集約）。全 .share-link は .share-row 配下で使う */
.share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--green-dark);
  font-size: 0.85rem;
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}
.share-link:active { color: var(--green); }
.share-link[hidden] { display: none; } /* display:flex を hidden 属性で上書きするため明示 */

/* ── 検索履歴 一覧 ── */
/* 全履歴 / お気に入り タブ */
.history-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  background: #efe9da;
  padding: 4px;
  border-radius: 12px;
}
.history-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 8px;
  border-radius: 9px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.history-tab.is-active {
  background: var(--card);
  color: var(--green-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.history-list { list-style: none; padding: 0; margin: 0 0 8px; }
.history-item {
  display: flex;
  /* タグで行が可変高になるため上揃え。★/🗑が個体番号の行から浮かないようにする */
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.history-item .hi-arrow { align-self: center; }
.history-item:active { background: #efe9dd; }
.hi-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hi-id { font-weight: 700; font-size: 1rem; letter-spacing: 1px; }
.hi-date { font-size: 0.78rem; color: var(--muted); }
.hi-arrow { color: var(--muted); font-size: 1.2rem; }
.history-empty { color: var(--muted); text-align: center; padding: 24px 0; }
.history-item.is-fav { background: #fdf6e1; }
/* お気に入り・削除ボタン（タップ領域を確保） */
.hi-fav, .hi-del {
  flex: none;
  border: none;
  background: transparent;
  cursor: pointer;
  /* 取り返しのつかない操作（お気に入り解除・削除）。手袋想定でHIGの44ptタップ領域を確保 */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 8px;
  font-size: 1.2rem;
}
.hi-fav { color: var(--eartag); }
.hi-fav[aria-pressed="false"] { color: var(--muted); }
.hi-del { color: var(--muted); }
.hi-fav:active, .hi-del:active { background: #eef0ee; }
.csv-btn {
  display: block;
  width: 100%;
  margin: 4px 0 8px;
  min-height: 46px;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--brand);
  border-radius: 13px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.csv-btn:active { background: #f3efe8; }

/* ── 無料体験終了後の履歴ロック ── */
/* 案内バー（クリア表示の最後とマスク行の間） */
.history-lockbar {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 14px 0 10px;
  padding: 11px 13px;
  border-radius: 14px;
  background: var(--warn-bg);
  border: 1px solid #f0dca6;
}
.history-lockbar .hlb-ic {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(138, 97, 28, 0.18);
}
.history-lockbar .hlb-tx {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--warn-ink);
}
.history-lockbar .hlb-tx b { display: block; font-weight: 700; margin-bottom: 1px; }
.lock-ic {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.history-lockbar .hlb-ic .lock-ic { color: var(--warn-ink); }
/* マスク行（単色。blurは"壊れて見える"ため不採用＝lemayレビュー） */
.history-item.masked { padding: 0; cursor: pointer; }
.history-item.masked .hi-lockrow {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 15px 12px;
  background: #efece4;
  /* 屋外・直射日光でも読めるよう muted より暗く（#efece4上で約4.9:1、AA達成／lemayレビュー） */
  color: #6b6459;
}
.history-item.masked .lock-ic {
  flex: none;
  /* 鍵アイコンも #efece4 上でUIコンポーネント基準に余裕を持たせる（約4.0:1、下限3:1／lemayレビュー） */
  color: #7a7267;
  width: 18px;
  height: 18px;
}
.history-item.masked .hi-lock-tx { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.history-item.masked .hi-lock-bar { flex: 1; height: 9px; border-radius: 5px; background: #e2ddd3; }
.history-item.masked:active .hi-lockrow { background: #e7e3d9; }
/* ロック解除CTA */
.history-unlock-li { list-style: none; margin: 12px 0 6px; }
.history-unlock-cta {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 14px;
  min-height: 46px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, var(--green), var(--green-dark));
  box-shadow: var(--shadow-cta);
  cursor: pointer;
}
.history-unlock-cta small { display: block; font-weight: 500; font-size: 0.74rem; opacity: 0.92; margin-top: 3px; }
.history-unlock-cta:active { transform: translateY(1px); }

/* ── 任意タグ（色つき）── */
/* タグ名ごとに固定する色トークン。クリーム背景で読みやすい7色。 */
.c-green  { --tb:#eef3ea; --ti:#4f7a42; --tbd:#d7e6cf; --tsw:#6aa55a; }
.c-blue   { --tb:#e9f0f7; --ti:#3c6797; --tbd:#cfe0f0; --tsw:#5a8fcf; }
/* amber は is-fav 行(#fdf6e1)と同化しないよう、やや深めのbg/borderにする */
.c-amber  { --tb:#fbecc4; --ti:#845c17; --tbd:#eed69a; --tsw:#e5a93c; }
.c-red    { --tb:#fbe6e0; --ti:#a8452e; --tbd:#f0cfc4; --tsw:#d96a4a; }
.c-purple { --tb:#efe9f6; --ti:#6b4d94; --tbd:#ddd0ee; --tsw:#8a6fc0; }
.c-teal   { --tb:#e4f2ef; --ti:#2f7d6f; --tbd:#c8e6df; --tsw:#3d9e8c; }
.c-gray   { --tb:#eeece7; --ti:#5f584f; --tbd:#ddd8cf; --tsw:#8b8177; }
.tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tsw); flex: none; }

/* タブ下のタグ絞り込み行 */
.history-filter { display: flex; align-items: center; gap: 8px; margin: 0 2px 12px; }
.history-filter[hidden] { display: none; } /* display:flex を hidden 属性で上書きするため明示 */
.history-filter-label { font-size: 0.72rem; color: var(--muted); flex: none; }
.history-filter-chips {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.history-filter-chips::-webkit-scrollbar { display: none; }
.hf-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--tbd); background: var(--tb); color: var(--ti);
  padding: 7px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  white-space: nowrap; cursor: pointer; min-height: 34px;
}
.hf-chip .hf-n { opacity: 0.6; font-size: 0.72rem; }
.hf-chip.is-on { background: var(--tsw); border-color: var(--tsw); color: #fff; }
.hf-chip.is-on .tag-dot { background: rgba(255,255,255,0.85); }
.hf-chip.hf-clear { background: transparent; border-color: var(--border-strong); color: var(--muted); }

/* 履歴1件のタグ表示 */
.hi-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.hi-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--tb); color: var(--ti); border: 1px solid var(--tbd);
  border-radius: 999px; padding: 3px 8px 3px 11px; font-size: 0.76rem; font-weight: 600;
}
.hi-tag .tag-dot { width: 7px; height: 7px; margin-left: -3px; }
/* ✕: 見た目は小さいまま、当たり判定を広げる（手袋でのミスタップ対策）。
   縦方向のはみ出しはネガティブマージンで吸収し、チップ高さは変えない。 */
.hi-tag-x {
  border: none; background: none; color: var(--ti); opacity: 0.5;
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  padding: 10px; margin: -10px -6px -10px -2px;
}
.hi-tag-x:active { opacity: 1; }
/* ＋タグ: 主要動線。最低44ptのタップ高を確保する */
.hi-addtag {
  border: 1px dashed var(--border-strong); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 3px 12px; min-height: 34px;
  display: inline-flex; align-items: center;
  font-size: 0.76rem; font-weight: 600; cursor: pointer;
}
.hi-addtag:active { background: #f3efe8; }

/* タグ編集の入口チップ（絞り込みチップ行の末尾）と編集シート */
/* 破線は「追加」の視覚言語（.hi-addtag/.tag-edit-new）なので、管理入口のここは実線 */
.hf-chip.hf-edit { background: transparent; border-color: var(--border-strong); color: var(--muted); }
.tag-edit-list {
  list-style: none; margin: 4px 0 6px; padding: 0;
  max-height: 42vh; overflow-y: auto;
}
.tag-edit-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 6px 4px;
  border: none; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: inherit;
}
.tag-edit-list li:last-child .tag-edit-row { border-bottom: none; }
.tag-edit-row:active { background: #f3efe8; }
.tag-edit-n { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.tag-edit-delete {
  width: 100%; min-height: 48px; margin-top: 16px;
  border: 1px solid var(--danger); border-radius: var(--radius-md);
  background: transparent; color: var(--danger-ink);
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.tag-edit-delete:active { background: var(--danger-bg); }
.tag-edit-new {
  width: 100%; min-height: 44px; margin-top: 10px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
  background: transparent; color: var(--muted);
  font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.tag-edit-new:active { background: #f3efe8; }
/* 削除確認（ネイティブconfirmは使わない: 文言・色を握るため） */
.tag-edit-confirm-msg {
  font-size: 0.9rem; color: var(--text); line-height: 1.7;
  white-space: pre-line; margin: 4px 0 14px;
}
.tag-edit-confirm-del {
  width: 100%; min-height: 48px;
  border: none; border-radius: var(--radius-md);
  background: var(--danger); color: #fff;
  font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.tag-edit-confirm-del:active { background: var(--danger-ink); }
.tag-edit-confirm-cancel {
  width: 100%; min-height: 48px; margin-top: 10px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-md);
  background: transparent; color: var(--text);
  font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.tag-edit-confirm-cancel:active { background: #f3efe8; }

/* タグ追加シート */
.tag-sheet-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(30,26,22,0.42);
  display: flex; align-items: flex-end; justify-content: center;
}
.tag-sheet-scrim[hidden] { display: none; }
.tag-sheet {
  width: 100%; max-width: 560px;
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 18px 18px calc(env(safe-area-inset-bottom) + 20px);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
  animation: tag-sheet-up 0.22s ease;
}
@keyframes tag-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .tag-sheet { animation: none; } }
.tag-sheet-title { margin: 0 0 3px; font-size: 1rem; color: var(--brand-dark); }
.tag-sheet-sub { margin: 0 0 14px; font-size: 0.78rem; color: var(--muted); }
.tag-input-row { display: flex; gap: 8px; margin-bottom: 14px; }
.tag-input-row input {
  flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 12px; font-size: 1rem; color: var(--text); background: #fff;
}
.tag-input-row input:focus { outline: 2px solid var(--green); border-color: var(--green); }
.tag-input-row button {
  flex: none; border: none; background: var(--green); color: #fff; border-radius: 10px;
  padding: 0 18px; min-height: 46px; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  box-shadow: 0 6px 14px rgba(106,165,90,0.28);
}
.tag-input-row button:active { background: var(--green-dark); }
.tag-field-label { font-size: 0.72rem; color: var(--muted); margin: 0 0 8px; letter-spacing: 0.04em; }
.tag-swatches { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tag-sw {
  width: 40px; height: 40px; border-radius: 50%; background: var(--tsw);
  border: 2px solid transparent; box-shadow: inset 0 0 0 2px #fff;
  cursor: pointer; position: relative; flex: none;
}
.tag-sw.is-sel { border-color: var(--tsw); }
.tag-sw.is-sel::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 0.9rem; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.tag-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.tag-schip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--tbd); background: var(--tb); color: var(--ti);
  border-radius: 999px; padding: 8px 13px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.tag-suggest[hidden], .tag-field-label[hidden] { display: none; }

/* ── ③a 写真 ── */
.capture-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px;
  border: 2px dashed var(--green);
  border-radius: var(--radius);
  color: var(--green-dark);
  font-weight: 600;
  cursor: pointer;
}
.capture-btn:active { background: #eef5ef; }
.capture-icon { font-size: 2rem; }
/* 2つ目以降のボタン（画像を選ぶ）は間隔を空け、控えめな配色に */
.capture-btn + .capture-btn { margin-top: 12px; }
.capture-secondary {
  border-style: solid;
  border-color: var(--border);
  color: var(--muted);
}
.capture-secondary:active { background: #efe9dd; }
.preview-wrap { margin-top: 14px; text-align: center; }
.preview-wrap img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* ── ③a カメラ撮影 ── */
.camera-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camera-wrap video { width: 100%; height: 100%; object-fit: cover; transform-origin: center; }
/* ズームUI（プレビュー下部にオーバーレイ） */
.camera-zoom {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.camera-zoom[hidden] { display: none; }
.camera-zoom input[type="range"] { width: 150px; accent-color: #fff; }
.zoom-btn {
  /* 手袋想定でHIGの44ptタップ領域を確保（旧30px）。ピンチで狙い直せなくなったため余裕を持たせる */
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.camera-status { color: var(--danger); font-size: 0.85rem; line-height: 1.6; text-align: center; margin-bottom: 12px; }
.camera-status:empty { display: none; }

/* ── ③b 番号入力 ── */
.number-form { display: flex; flex-direction: column; gap: 14px; }
.number-form input {
  width: 100%;
  /* 高さ固定だと文字サイズ設定(大)で入力文字が窮屈になるため下限のみ指定 */
  min-height: 58px;
  padding: 8px 14px;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px; /* letter-spacing分の右ズレを中央に補正 */
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  background: #fff;
  border: 1.5px solid var(--border-strong);
  border-radius: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.number-form input::placeholder {
  color: #b7b0a4;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: normal;
}
.number-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(106, 165, 90, 0.14); }

/* アップデート誘導オーバーレイ（.tips-overlay/.tips-cardを流用） */
.update-note {
  margin: 0 0 16px;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.7;
  text-align: center;
}
.update-later {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
}
/* ホームの常設アップデートバッジ。CTA(緑)や無料枠ピル(緑)と混ざらないよう情報系の青。
   主役はあくまで検索3ボタン＝ラベルは細め・1行はellipsisでCSS側が物理保証する
   （文言の短さに賭けない。文字サイズ「大」でも2行化させない）。述語は「更新する」側が担う */
.update-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--info-ink);
  background: var(--info-bg);
  border: 1px solid rgba(90, 143, 207, 0.25);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
}
.update-badge[hidden] { display: none; } /* display:flex を hidden 属性で上書きするため明示 */
.update-badge:active { transform: translateY(1px); }
.update-badge .msr { flex: none; }
.update-badge-text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.update-badge-cta {
  flex: none;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: var(--info);
  border-radius: 999px;
}

/* ── ③c 音声入力 ── */
.voice-mic {
  width: 92px;
  height: 92px;
  margin: 8px auto 14px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  background: var(--green-100);
  border: 2px solid transparent;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.voice-mic:active { transform: scale(0.96); }
.voice-mic.listening { animation: voice-pulse 1s ease-in-out infinite; border-color: var(--danger); }
/* 停止ボタン（録音中の入力/停止トグル） */
.voice-stop { background: var(--danger); box-shadow: none; }
.voice-stop:active { background: var(--danger-ink); }
@keyframes voice-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.55; }
}
/* 「聴いています」プロンプト（録音中だけ表示・大きく目立たせる） */
.voice-listening {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-700, #3f7a3f);
  margin-bottom: 4px;
  min-height: 1.4em;
}
.voice-listening.done { color: var(--green-700, #3f7a3f); }
.voice-listening[hidden] { display: none; }
.voice-status { text-align: center; color: var(--muted); font-size: 0.9rem; min-height: 1.6em; margin-bottom: 12px; }

/* 桁スロット表示（読み上げた桁が埋まっていく。5 + 4 + 1 でグループ化） */
.voice-number {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 2.2em;
  margin-bottom: 6px;
}
.voice-number .vslot {
  width: 1.5rem;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--border, #cdc6bb);
  border-bottom: 2px solid var(--border, #cdc6bb);
}
.voice-number .vslot.filled {
  color: var(--text, #2c2c2c);
  border-bottom-color: var(--green-700, #3f7a3f);
}
.voice-number .vbreak { flex-basis: 100%; height: 0; } /* 5桁で改行し2行に */
.voice-heard { text-align: center; font-size: 0.76rem; color: var(--muted); min-height: 1.1em; margin-bottom: 14px; word-break: break-all; }

/* ── 進捗バー ── */
/* progress画面はheader/footer非表示でmainがほぼ全画面。カードを縦中央に置く。
   :not([hidden]) で限定し、hidden属性のdisplay:noneを上書きしないようにする */
#screen-progress:not([hidden]) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - env(safe-area-inset-top) - 26px);
}
.progress-card {
  width: 100%;
}
.progress-label {
  /* 文言が1行→2行に変わってもカード高さ（＝縦中央寄せの位置）を動かさないため、
     最初から2行分を確保して縦中央に置く */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  min-height: 2.8em;
  text-align: center;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
}
.progress-track {
  width: 100%;
  height: 12px;
  background: #e7ede7;
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), #86c172);
  border-radius: 999px;
  transition: width 0.18s ease;
}
.progress-pct {
  text-align: center;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* 待たされたときの逃げ道。手袋操作を前提に、新規ボタンは最初から44pt以上を確保する。
   既存クラスが持つ margin-top と二重に効かないよう、間隔はここで明示的に決める */
.progress-actions {
  margin-top: 18px;
}
.progress-actions .secondary-btn {
  margin-top: 0;
}
.progress-actions .link-btn {
  margin-top: 10px;
  min-height: 44px;
  /* 詰まった画面から抜ける唯一の導線。屋外の直射日光でも確実に読めるよう
     --muted(約5:1)ではなく本文色まで上げる */
  color: var(--brand);
}
/* 10秒後に出現してもレイアウトが跳ねないよう、最初から場所だけ確保しておく
   （hidden属性での出し入れだと、押そうとした指の下でキャンセルが動く） */
.progress-actions .is-invisible {
  visibility: hidden;
}

/* 読み取りに使った写真。OCRが別の牛の番号を拾っても本人が気づけるよう、
   番号の直下に十分な大きさで置く（小さなサムネイルでは10桁を照合できない） */
.result-photo {
  margin: 0 0 18px;
}
.result-photo img {
  display: block;
  width: 100%;
  /* src差し込み前・読み込み失敗時に高さ0へ潰れると、下の表がガクッと動き、
     さらに「写真が出るはずだった」ことにも気づけない。必ず場所を確保する */
  min-height: 160px;
  max-height: 220px;
  object-fit: contain;
  background: var(--photo-mat);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* 縦長写真は高さ上限に当たって横幅まで縮むため、上限を緩めて可読性を保つ */
.result-photo img.is-portrait {
  max-height: 320px;
}
.result-photo-failed {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--photo-mat);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* ── ⑤ 結果 ── */
/* ステータスタグ（汎用） */
.tag {
  display: inline-flex;
  align-items: center;
  /* 高さ固定だと文字サイズ設定(大)で中身がクリップされるため下限のみ指定 */
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.tag.neutral { background: #f0ece4; color: var(--brand); }
/* 性別タグ（ヒーローの薄緑背景に埋もれないよう、はっきりした色に） */
.tag.sex { background: var(--green); color: #fff; }
.tag.sex.female { background: #e84a7f; color: #fff; }   /* メス=ローズ */
.tag.sex.male { background: #2f7dd1; color: #fff; }     /* オス=ブルー */
.tag.warn { background: var(--warn-bg); color: var(--warn-ink); }
.tag.info { background: var(--info-bg); color: var(--info-ink); }
.tag.danger { background: var(--danger-bg); color: var(--danger-ink); }

/* ヒーロー（牛＋個体識別番号＋状態タグ） */
.result-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    linear-gradient(145deg, rgba(106, 165, 90, 0.16), rgba(255, 255, 255, 0.6)),
    #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 15px 16px;
  margin-bottom: 18px;
}
.result-hero-cow { width: 58px; height: 58px; flex: none; object-fit: contain; }
/* 番号は cqw（コンテナ幅）基準なので、rootを拡大しても幅が増えなければ大きくならない。
   一番読ませたい10桁が一番伸びないのでは本末転倒なため、大では装飾の牛アイコン
   （alt=""＝情報を持たない）を縮めて、その幅を番号に譲る。 */
html[data-fontscale="145"] .result-hero-cow { width: 40px; height: 40px; }
/* 番号(桁数固定)を残り幅に収めるため、mainを幅の基準コンテナにする（cqw参照元） */
.result-hero-main { flex: 1; min-width: 0; container-type: inline-size; }
.result-hero-label { font-size: 0.78rem; font-weight: 800; color: var(--green-700); }
.cattle-id {
  /* 余裕があれば1.7rem、狭い端末では main 幅に応じて縮めて右へのはみ出しを防ぐ。
     10桁固定なのでコンテナ幅基準(cqw)でフィットさせる。下限を設け過度な縮小も防ぐ。
     cqw非対応(iOS<16)は vw フォールバック。html基準が125%のため係数は8vw
     （6vwだと下限に張り付き縮まない）。最狭でも下限26pxならはみ出し元34pxより小さく安全側。
     ⚠下限は rem ではなく絶対px。文字サイズ設定でrootが145%まで動くため、remのままだと
     下限が膨らみ「10桁がはみ出す」という直そうとしたバグ自体を再発させる。
     拡大の恩恵は下限ではなく、大で牛アイコンを縮めて番号に幅を譲ることで出す（下記）。 */
  font-size: clamp(26px, 8vw, 1.7rem);
  font-size: max(22px, min(1.7rem, 12.8cqw));
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.15;
  margin: 1px 0 0;
  color: var(--brand);
  white-space: nowrap;
}
.result-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.section-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  margin: 18px 0 8px;
  letter-spacing: 0.04em;
}
/* 基本情報の「見出し｜値」。table のままだと列幅がテーブル全体で共有され、見出しが
   長い行（母牛の個体識別番号）に引きずられて値の列が痩せ、10桁の個体識別番号が右端で
   欠ける（文字サイズ「大」で実測。端末側の文字拡大が乗るAndroidではさらに顕著）。
   このアプリで最後まで読めなければならないのは10桁の番号なので、行ごとに flex にして
   「横に並べきれなくなったら値を次の行へ落として縦積みにする」挙動へ変える。
   しきい値は td の flex-basis(5.5em) ＝ 10桁ぶんの幅。em なのでアプリ内の文字サイズ設定にも
   端末側の拡大にも自動で追従し、判定用のブレークポイントを別に持たなくて済む。 */
.info-table { width: 100%; border-collapse: collapse; }
.info-table, .info-table tbody { display: block; }
.info-table tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px; /* 縦積みに落ちたときだけ効く */
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.info-table tr:last-child { border-bottom: 0; }
.info-table th, .info-table td {
  text-align: left;
  padding: 0;
  border: 0;
  font-size: 0.92rem;
}
.info-table th { color: var(--muted); font-weight: 700; flex: 0 1 auto; min-width: 5.5em; }
.info-table td { color: var(--text); font-weight: 600; flex: 1 1 5.5em; }

.history { list-style: none; padding: 0; margin: 0; }
.history li {
  position: relative;
  padding: 0 0 16px 20px;
  border-left: 2px solid var(--border);
}
.history li:last-child { border-left-color: transparent; padding-bottom: 2px; }
.history li::before {
  content: "";
  position: absolute;
  left: -7px; top: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--green-100);
}
.history .h-top { display: flex; align-items: center; gap: 9px; }
.history .h-date { font-weight: 800; font-size: 0.9rem; color: var(--brand); }
.history .h-event {
  display: inline-flex;
  align-items: center;
  /* height 固定だと文字サイズ設定「大」＋端末側の拡大で中の文字が上下に切れる。
     min-height を下限にし、padding は em で持って文字サイズに追従させる
     （px 固定のままだと、文字だけ育って丸ピルの縁に張り付く） */
  min-height: 22px;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: #f0ece4;
  color: var(--muted);
}
.history .h-event.ev-birth { background: var(--green-100); color: var(--green-700); }
.history .h-event.ev-in { background: var(--info-bg); color: var(--info-ink); }
.history .h-event.ev-end { background: #e9e4dc; color: var(--brand); }
.history .h-loc { font-size: 0.82rem; color: var(--muted); margin-top: 3px; }

/* ── 母系血統（母→祖母→曾祖母）── */
.pedigree-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  /* min-height にする理由: 文字サイズ「大」×360dp幅（Androidで最も多い）だと
     ラベルが2行に折り返す。height 固定だと枠の高さが伸びず文字が枠外へはみ出す。
     44px は下限（タップ領域）として維持し、折り返した分は枠が伸びる。 */
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--brand);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}
.pedigree-btn:active { background: var(--green-100); border-color: var(--green); }
.pedigree-hint { font-size: 0.76rem; color: var(--muted); margin: 8px 2px 0; line-height: 1.5; }
.pedigree-loading { font-size: 0.86rem; color: var(--muted); padding: 12px 2px; }
.pedigree-error {
  font-size: 0.86rem; color: var(--danger-ink); background: var(--danger-bg);
  padding: 10px 12px; border-radius: var(--radius-sm); margin-bottom: 10px;
}
.pedigree-chain { display: flex; flex-direction: column; }
/* 既存の .history（罫線＋ドット）と視覚言語を揃える。結果画面自体が .card のため、
   ノードは影を持たず境界線のみ＝カードの入れ子二重影を避ける。 */
.pedigree-node {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.pedigree-node.is-base { background: var(--green-100); border-color: transparent; }
/* 終端（NLBC未収載）: 破線は既存で「追加できる」アフォーダンスに使われ誤操作を招くため、
   実線＋ニュートラル背景で「これ以上は無い」を静かに示す。 */
.pedigree-node.is-missing { background: #f0ece4; border-color: var(--border-strong); }
.pedigree-node .ped-rel {
  flex: none; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  /* 幅は変数に持たせ、縦線(.pedigree-link)の位置を計算で追従させる。
     文字サイズ設定で「曾祖母」がはみ出さないよう、大では幅を広げる（下記） */
  width: var(--ped-badge-w); min-height: 26px; padding: 2px 4px;
  border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 0.8rem; font-weight: 800;
  white-space: nowrap; /* 「曾祖母」(3字)がバッジ内で折り返してクリップされるのを防ぐ */
}
.pedigree-node.is-base .ped-rel { background: var(--green-dark); }
.pedigree-node.is-missing .ped-rel { background: var(--muted); }
.pedigree-node .ped-body { min-width: 0; flex: 1; }
.pedigree-node .ped-id {
  font-size: 1.02rem; font-weight: 900; letter-spacing: 1px; color: var(--brand);
}
.pedigree-node .ped-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.pedigree-node .ped-sub { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.pedigree-node .ped-missing { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
/* タップでその牛の検索結果へドリルダウンできる祖先ノード */
.pedigree-node.is-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pedigree-node.is-tappable:active { background: var(--green-100); border-color: var(--green); }
.pedigree-node.is-tappable:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* タップ可能を示すシェブロン。情報密度の高いカードに埋め込む副次アフォーダンスのため、
   モードカードの淡色版(--border-strong)ではなく意図的に濃い版(--muted)で視認性を確保する。 */
.pedigree-node .ped-chev { flex: none; color: var(--muted); font-size: 1.35rem; line-height: 1; font-weight: 700; }
/* 世代をつなぐ縦線: relationバッジ(左端14px)の中心の直下に通す。
   バッジ幅は文字サイズ設定で変わるため、手打ちの40pxではなく変数から計算する */
.pedigree-link {
  width: 2px; height: 16px;
  margin-left: calc(14px + var(--ped-badge-w) / 2 - 1px);
  background: var(--border-strong);
}

.result-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* 横並び行では link-btn を全幅化しない（縦積みbackのみ全幅） */
.result-actions .link-btn { display: inline-block; width: auto; margin-top: 0; padding: 6px; }
/* CTA行（画像で保存／LINEで共有）は全幅で等分し、「← 戻る」はその下の行に置く。
   3つ横並びは 390px 幅でも 40px 足りず折り返す（実測: 戻る71px＋CTA群285px＞内側316px）ので、
   最初から2段構成にして端末幅で見た目が変わらないようにする */
.result-actions { flex-wrap: wrap; row-gap: 12px; }
.result-ctas {
  display: flex;
  flex-wrap: wrap; /* 2つ並べて入らない幅（320px級・文字サイズ拡大時）は縦積みに落とす */
  gap: 8px;
  flex: 1 0 100%;
}
.result-ctas > button {
  flex: 1 1 140px; /* 140px×2+gap が収まる幅（≒390px端末以上）では横並び */
  justify-content: center;
  white-space: nowrap; /* ピル内で「画像で／保存」と2行に割れない */
  padding-top: 11px;
  padding-bottom: 11px; /* 40px程度の高さ＝指で押しやすい */
}
/* LINEで共有（画像で保存と同じピル形。色だけLINE系の緑で共有先を示す） */
.result-line-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 9px 14px;
  background: var(--line-green);
  border: 0;
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
}
.result-line-btn:active { background: var(--line-green-active); }
.result-line-btn:disabled { opacity: 0.6; }
.result-line-btn .msr { margin-right: 0; width: 1.1em; height: 1.1em; }
/* 保存ボタン（控えめCTA） */
.save-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 9px 14px;
  background: var(--green-100);
  border: 0;
  color: var(--green-700);
  border-radius: 999px;
  cursor: pointer;
}
.save-btn:active { background: #e2efdc; }

/* ── エラー ── */
.error-card { text-align: center; }
.error-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  background: var(--warn-bg);
  border-radius: 50%;
}
.error-msg { margin: 4px 0 18px; color: var(--brand); font-weight: 700; line-height: 1.7; }
.error-msg small { color: var(--muted); font-weight: 400; }

.app-footer {
  text-align: center;
  padding: 12px 20px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  color: var(--muted);
  font-size: 0.55rem; /* 標準サイズで11px相当。文字サイズ設定に追従させる */
  line-height: 1.7;
}
/* 各ブロックを同じ列幅で中央に揃え、行を均等化 */
.app-footer p,
.app-footer .footer-legal {
  max-width: 21rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.app-footer a { color: var(--muted); text-decoration: underline; }
.app-footer .nb { white-space: nowrap; } /* 語の途中で改行させない */
.footer-source { margin: 0 auto; }
/* 法的リンクは横1行（・区切り）に集約。狭幅では自然に折返す（文言は短縮しない） */
.footer-legal { margin-top: 9px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 4px; }
.footer-legal a { color: var(--muted); text-decoration: underline; white-space: nowrap; }
.footer-legal span { display: inline; color: var(--border-strong); } /* ・区切り（横並びで表示） */
.install-footer-link {
  display: block;
  margin: 10px auto 0;
  background: none;
  border: none;
  color: var(--green-dark);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

/* ── 下部固定タブメニュー ── */
/* 表示は body.has-tab-bar（showScreenが規約同意・進捗以外で付与）に連動させる。
   寸法は px 固定＝文字サイズ設定(125%/145%)で肥大させない。牛舎で片手でも押せるよう
   タップ領域は各タブ全高(58px+セーフエリア)を確保する。 */
.tab-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40; /* シート類(50〜70)より下、通常コンテンツより上 */
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 16px rgba(72, 63, 52, 0.06);
}
body:not(.has-tab-bar) .tab-bar { display: none; }
/* キーボード表示中（入力欄フォーカス中）はタブバーごと隠す。iOSの入力アシスタント
   バーと同じ帯域を取り合ってラベルが判読不能に重なるため（app.jsのkb-open参照） */
body.kb-open .tab-bar { display: none; }
.tab-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 0 5px;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab-item .msr { width: 26px; height: 26px; fill: currentColor; }
.tab-item span { font-size: 12px; line-height: 1; font-weight: 600; letter-spacing: 0.02em; }
.tab-item.is-active { color: var(--green-700); }
/* タブバー表示中はコンテンツ・フッター・インストールバーがバーに隠れないよう逃がす */
body.has-tab-bar main { padding-bottom: calc(env(safe-area-inset-bottom) + 74px); }
body.has-tab-bar .app-footer { padding-bottom: calc(env(safe-area-inset-bottom) + 70px); }
/* ホーム(TOP)はフッターが後続し、フッター自身がタブバー避け(70px+セーフエリア)を持つ。
   main側の74pxと二重になりカード下に大きな空白が出るため、ホームだけ底上げを外す
   （TOP以外はフッター非表示なのでmain側の74pxが引き続き必要。.on-top=TOPのみ付与） */
body.has-tab-bar.on-top main { padding-bottom: 8px; }
body.has-tab-bar .install-bar { bottom: calc(env(safe-area-inset-bottom) + 58px); }

/* ── PWA: ホーム画面に追加 誘導バー ── */
/* display:flex が hidden 属性を上書きしてしまうため、hidden時は明示的に非表示にする */
.install-bar[hidden], .install-sheet[hidden] { display: none; }
/* footer-link も display:block が hidden を上書きするため明示的に非表示 */
.install-footer-link[hidden] { display: none; }

body.has-install-bar { padding-bottom: 84px; }

.install-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.10);
  animation: slide-up 0.3s ease;
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.install-bar-text {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
}
.install-bar-icon { font-size: 1.4rem; flex: none; }
.install-bar-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.install-add-btn {
  padding: 9px 16px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.install-add-btn:active { background: var(--green-dark); }
.install-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 6px 8px;
  cursor: pointer;
}

/* ── 手順シート（ボトムシート） ── */
.install-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.install-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  animation: fade-in 0.2s ease;
}
.install-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(env(safe-area-inset-bottom) + 20px);
  animation: slide-up 0.28s ease;
}
.install-sheet-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  color: var(--green-dark);
  text-align: center;
}
.install-steps { list-style: none; padding: 0; margin: 0 0 14px; }
.install-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 2px;
  font-size: 0.92rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--border);
}
.install-steps li:last-child { border-bottom: none; }
.step-num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.share-ico { vertical-align: -4px; color: var(--green-dark); }
.install-note {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 4px 0 16px;
  padding: 12px;
  background: #efe9dd;
  border-radius: 10px;
}
.install-note:empty { display: none; }

/* ── 規約・ポリシーのアプリ内ビューア ──
   .install-sheet（ボトムシート）の骨格を流用しつつ、本文が長いので中身だけをスクロールさせる。
   同意画面から開くため、紹介/インストールの各シート(60)より上に重ねる。 */
.legal-sheet { z-index: 70; }
.legal-sheet-panel {
  display: flex;
  flex-direction: column;
  /* 画面の大半を使って読ませる。ヘッダー(タイトル+✕)だけ固定し、本文は下端まで流す */
  height: 88vh;
  height: 88dvh; /* iOS Safariのアドレスバー伸縮で下端が隠れるのを防ぐ（非対応は上のvhで動く） */
  padding-top: 14px;
}
.legal-sheet-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.legal-sheet-title {
  flex: 1;
  margin: 0;
  text-align: left;
  font-size: 1rem;
}
.legal-sheet-x {
  flex: none;
  /* 手袋でも押せるよう44pt確保。牛舎での片手操作を前提にする */
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.legal-sheet-x:active { color: var(--text); }
/* 本文（legal-content.js から流し込む） */
.legal-doc {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* 端まで読んだ勢いで背後の画面が動かないようにする */
  padding: 4px 2px 16px;
  line-height: 1.8;
}
.legal-doc h2 {
  font-size: 0.95rem;
  color: var(--brand);
  border-left: 4px solid var(--green);
  padding-left: 8px;
  margin: 22px 0 8px;
}
.legal-doc p, .legal-doc li { font-size: 0.86rem; }
.legal-doc ul { padding-left: 1.15em; margin: 8px 0; }
.legal-doc .legal-updated { color: var(--muted); font-size: 0.78rem; margin: 0 0 4px; }
.legal-doc .note {
  background: var(--green-100);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.8rem;
}
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 8px; }
.legal-doc th, .legal-doc td {
  border: 1px solid var(--border);
  padding: 7px;
  text-align: left;
  vertical-align: top;
}
/* 見出しセルは幅を確保する。放っておくと文字サイズ「大」で特商法の左見出し列が
   1文字ずつ折り返って行が縦に伸びる（シミュレータの iPhone 17 で実測）。
   em指定なので文字サイズ設定に追従する */
.legal-doc th { color: var(--brand); font-weight: 700; min-width: 5.5em; }
/* 「プランの変更・解約」から各ストアの定期購入画面へ飛ぶボタン（ネイティブのみ差し込まれる） */
.legal-plan-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 10px 0 4px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 12px;
  color: var(--green-dark);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.legal-plan-btn:active { background: var(--green-100); }
/* Web/PWA向けの手順ブロック（両ストアを併記） */
.legal-plan {
  background: var(--green-100);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.legal-plan p { margin: 0 0 6px; }
.legal-plan ul { margin: 0; }

/* ── 友達に紹介する（共有）シート ── */
.share-lead {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 16px;
  text-align: center;
}
.share-qr {
  display: flex;
  justify-content: center;
  margin: 0 auto 8px;
}
.share-qr img {
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.share-qr-caption {
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
  margin: 0 0 16px;
}
.share-url-row {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}
.share-url-input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  font-size: 0.82rem;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7f9f7;
}
.share-copy-btn {
  flex: none;
  padding: 0 16px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-dark);
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 10px;
  cursor: pointer;
}
.share-copy-btn.copied {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.share-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.share-line-btn {
  width: 100%;
  padding: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--line-green);
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.share-line-btn:active { background: var(--line-green-active); }
.share-native-btn {
  width: 100%;
  padding: 13px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--green-dark);
  background: #fff;
  border: 1px solid var(--green);
  border-radius: 12px;
  cursor: pointer;
}
.share-native-btn[hidden] { display: none; }

/* ── 履歴の裏側更新の通知ピル（#refresh-note は app.js が生成）──
   結果画面の内容が最新に差し替わったことを一言だけ伝える。操作は奪わない。
   タブバー(z-index:40)の上に出すが、シート類(50〜70)よりは下。 */
#refresh-note {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 84px); /* タブバーに被せない */
  transform: translateX(-50%) translateY(6px);
  z-index: 45;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#refresh-note.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Web閲覧時のインストール誘導バー(bottom:58px起点・高さ最大90px程度)と重ならないよう、
   バー表示中はその上まで逃がす（文字サイズ145%設定でのバー背伸び分も含む） */
body.has-install-bar #refresh-note {
  bottom: calc(env(safe-area-inset-bottom) + 160px);
}
@media (prefers-reduced-motion: reduce) {
  #refresh-note { transition: opacity 0.25s ease; transform: translateX(-50%); }
  #refresh-note.show { transform: translateX(-50%); }
}

/* ══════════ 法人まとめ払い ══════════
   既存トークン（--green系/--warn系/--info系/--danger系/--radius系）をそのまま使い、
   数値はゴールモック(corporate-billing-goal-20260908.html)の .phone スケールに合わせる。 */

/* 緑・下線のテキストリンク（ペイウォールの法人リンク／ホームの法人入口で共用） */
.link-btn.accent-link {
  color: var(--green-dark);
  text-decoration: underline;
}

/* 汎用バナー（info/warn/danger/ok）。history-lockbar・update-badgeと同系統の配色ルールを
   1クラスに一般化したもの。JS側は状態に応じてクラスを付け替えるだけでよい。 */
.corp-banner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: 13px;
  padding: 11px 13px;
  margin: 10px 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  text-align: left;
}
.corp-banner[hidden] { display: none; }
.corp-banner b { display: block; margin-bottom: 2px; }
.corp-banner.info { background: var(--info-bg); color: var(--info-ink); }
.corp-banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.corp-banner.danger { background: var(--danger-bg); color: var(--danger-ink); }
.corp-banner.ok { background: var(--green-100); color: var(--green-700); }

/* 法人まとめ払い: フォーム入力欄（.number-form inputほど大きくない通常サイズのテキスト欄） */
.corp-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  font-size: 0.95rem;
  color: var(--text);
  background: #fff;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.corp-input::placeholder { color: #b7b0a4; }
.corp-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(106, 165, 90, 0.14); }
/* 招待コード欄: XXXXX-XXXXX の等幅・字間を空けた表示（JS側で自動大文字化・ハイフン整形） */
.corp-code-input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

/* ホーム: 法人利用中／承認待ちの状態行（config.enabled時、招待コード入口の代わりに出す） */
.corp-home-status {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 14px 0 0;
  padding: 10px 14px;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.corp-home-status[hidden] { display: none; }
.corp-home-status.ok { color: var(--green-700); background: var(--green-100); }
.corp-home-status.warn { color: var(--warn-ink); background: var(--warn-bg); }

/* ホーム: 招待リンク受信バナー（#screen-modeが既に1枚のcardなので入れ子cardにはしない） */
.corp-invite-banner { margin-top: 14px; }
.corp-invite-banner .corp-banner { margin-top: 0; cursor: pointer; }
.corp-invite-banner[hidden] { display: none; }

/* ホーム: 二重課金の案内カード */
.corp-dup-card { margin-bottom: 14px; }
.corp-dup-card[hidden] { display: none; }
.corp-dup-card .primary-btn { margin-top: 12px; }

/* 法人・牧場でご利用の方（分岐画面）は既存 .menu / .mode-btn をそのまま流用 */

/* 承認待ち／結果 画面: 中央寄せのステータス表示（ペイウォールのアイコンと同系統） */
.corp-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.corp-status-icon {
  width: 64px;
  height: 64px;
  margin: 4px auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.corp-status-icon .msr { width: 32px; height: 32px; }
.corp-status-icon.wait { background: var(--warn-bg); color: var(--warn-ink); }
.corp-status-icon.ok { background: var(--green-100); color: var(--green-dark); }
.corp-status .corp-status-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--brand);
}
.corp-status .corp-status-sub {
  margin: 0 0 16px;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.6;
}
.corp-status .corp-banner { width: 100%; text-align: left; margin-bottom: 14px; }
.corp-status .secondary-btn { margin-top: 4px; }