/* puramo-yarinaoshi (project-09-02) 固有スタイル
   design-tokens.css (バンドル内コピー) の上に載せる。
   外部フォント・CDN・外部画像は使わない(完成基準11)。 */
@import url("../design-tokens.css");

/* design-tokens.css の body に word-break 指定が無いため、狭い画面幅で日本語の禁則が崩れる。
   line-break: strict で行頭禁則を維持し、word-break: keep-all でカタカナ語の途中改行を防ぎ、
   overflow-wrap: break-word を安全弁に置く(04-01/04-02/04-03 と同じ三点セット)。 */
body {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}

.page-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

/* ===== 画面切替 =====

   ★ 入場演出で opacity を使わない。動かすのは位置だけにする。

   04-03 は「opacity:0 から始める演出」で2回、結果画面が真っ白になった。
   **演出が止まった時に何が残るかで設計を決める。**
   opacity を 0 から始める演出は、止まると「見えない」に落ちる。
   位置(transform)だけなら、止まっても「12px ずれた場所にちゃんと見える」で済む。
   **中身が読めなくなる演出は、演出として釣り合っていない。** */
.screen {
  transform: none;
}

.screen:not([hidden]) {
  animation: puramo-screen-in var(--duration-base, 0.24s) var(--ease, ease) 1;
}

@keyframes puramo-screen-in {
  from { transform: translateY(12px); }
  to { transform: none; }
}

.screen[hidden] { display: none; }

/* ===== 入口 =====
   ★ 04-02 では hero が 320×568 で 413px=画面の7割強を占め、道具本体を毎回画面外へ
     押し出していた(2026-08-26 実測)。ここは2行に抑え、症状の選択肢と同居させる。 */
.hero {
  padding: var(--space-2) 0 var(--space-1);
}

.hero[hidden] { display: none; }

.hero__title {
  margin: 0;
  font-size: clamp(1.15rem, 5.2vw, 1.6rem);
  line-height: 1.45;
}

/* ===== 画面の枠 ===== */

.hd { padding: var(--space-2) 0 var(--space-1); }

/* ★ 2026-08-29 実描画で見つけた見落とし:
   design-tokens.css の `h2` は**「小さく追跡させたラベル」**として定義されていて、
   `font-size: 0.8rem / letter-spacing: 0.25em / color: --color-text-muted` が付いている。
   こちらは h2 を**画面の見出し**として使っているのに font-size と line-height しか
   上書きしておらず、**letter-spacing 0.25em(実測 4.2px)と muted 色がそのまま残っていた**
   ——「先 に 分 け て か ら 、」と1文字ずつ離れて出ていた。
   **共通部品を別の役割で使う時は、その部品が持っている指定を全部見て打ち消す。**
   font-size を上書きしたことで letter-spacing の em 値が実寸で増えてもいた(0.8rem→1.05rem)。 */
.hd h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.45;
  color: var(--color-text);
}

.lead {
  margin: 4px 0 0;
  font-size: var(--fs-sm, 0.82rem);
  color: var(--color-text-muted);
}

.body { padding-bottom: var(--space-2); }

.foot {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.note {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===== 選択肢 =====
   ★ タップ対象は 44px を割らない。ID261/ID263 で 04-01 に17件・04-02 に9件の
     44px未満が見つかっている。**最初から割らない形で作る。** */
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.15s) var(--ease, ease),
              background-color var(--duration-fast, 0.15s) var(--ease, ease);
}

.opt:hover { border-color: var(--color-accent-strong); }

.opt.is-on {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-wash);
}

.opt__t {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.opt__s {
  display: block;
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ===== 見分け方(「どれか分からない」) ===== */

.disclosure {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm, 0.82rem);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.disclosure:hover { color: var(--color-accent-hover); }

.tells {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.tells[hidden] { display: none; }

.tell {
  display: block;
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.6;
}

.tell + .tell {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.tell b { display: block; }

.tell span { color: var(--color-text-muted); }

/* ===== 手順 ===== */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: puramo-step;
}

.steps li {
  position: relative;
  padding: 9px 10px 9px 36px;
  margin-bottom: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm, 0.84rem);
  line-height: 1.55;
}

.steps li::before {
  counter-increment: puramo-step;
  content: counter(puramo-step);
  position: absolute;
  left: 9px;
  top: 9px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--color-accent-strong);
  color: var(--color-accent-fg);
  font-size: 0.7rem;
  display: grid;
  place-items: center;
}

/* ===== 注意(やってはいけない + 安全上の注意)=====
   ★ 枠は1つ。初版のモックは2枠に分けていて、実描画で③だけ 2px 溢れた
     ——安全上の注意の実文言を入れる**前**に、である。
     同じ「注意」であり枠を2つ持つ理由が無いのでまとめた(足す前に削った)。 */
.warn {
  margin-top: var(--space-2);
  padding: 9px 11px;
  background: var(--color-bg);
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  font-size: var(--fs-xs, 0.78rem);
  line-height: 1.55;
}

.warn b { color: var(--color-danger); }

.warn__list {
  margin: 4px 0 0;
  padding-left: 1.2em;
}

.warn__slot {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-warning);
  color: var(--color-text);
}

/* 安全上の注意が未取得の間の見え方。**空欄にはしない。** */
.warn__slot--pending { color: var(--color-warning); }

/* ===== 出どころ =====
   ★ 結果と同じ画面に置く。**アフィリエイト表示の列を省略しない**
     (advisor 2026-08-29 指摘2の対案。当サイト自身も同じ立場にいることを併記する)。 */
.src {
  margin-top: var(--space-2);
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.src__lead {
  margin: 0 0 4px;
  font-weight: 700;
  color: var(--color-text);
}

.src__list,
.src__limits {
  margin: 0;
  padding-left: 1.1em;
}

.src__list li { margin-bottom: 4px; }

.src__list b { color: var(--color-text); }

.src__aff {
  display: block;
  color: var(--color-warning);
}

.src__naming {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.src__limits {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
}

.src__limits li { margin-bottom: 3px; }

/* ===== 10分プラン ===== */

.timebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: var(--space-1);
}

.time__n {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-accent-strong);
}

.time__u,
.time__label {
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted);
}

.time__bar {
  flex: 1;
  height: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.time__fill {
  display: block;
  height: 100%;
  background: var(--color-accent-strong);
  transition: width var(--duration-base, 0.24s) var(--ease, ease);
}

.check {
  list-style: none;
  margin: 0;
  padding: 0;
}

.check li { margin-bottom: 6px; }

.check__btn {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: left;
  font: inherit;
  font-size: var(--fs-sm, 0.84rem);
  line-height: 1.5;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.15s) var(--ease, ease);
}

.check__btn:hover { border-color: var(--color-accent-strong); }

.check li.done .check__btn {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.check__box {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
}

.check li.done .check__box {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

/* ===== 収益導線 =====
   ★ 10分プランを開いた後にだけ出る(手を動かす前に物を売らない)。
     開示は導線の**直前**に置く——04-02 ID242 で、開示とリンクが 518px 離れていて
     320×568 では同一画面に入らなかった(是正後 101px)。 */
.offer {
  margin-top: var(--space-2);
  padding: 10px 11px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs, 0.76rem);
  line-height: 1.55;
}

.offer[hidden] { display: none; }

.offer__pr {
  display: block;
  margin-bottom: 5px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.offer__why {
  display: block;
  margin-top: 5px;
  color: var(--color-text-muted);
}

/* ===== ボタン =====
   ★ 高さは 44px を割らない。04-01/04-02 では .btn--ghost が 320px 幅でだけ 39px になり、
     375px 以上では届いていた——**1つの幅だけ見ると存在しない欠陥に見える形**だった
     (ID261/ID263)。最初から min-height で押さえる。 */
.btn {
  display: block;
  width: 100%;
  min-height: 44px;
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm, 0.85rem);
  font-weight: 600;
  text-decoration: none;
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-border);
  border-bottom: 3px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--duration-fast, 0.15s) var(--ease, ease),
              color var(--duration-fast, 0.15s) var(--ease, ease);
}

.btn--ghost:hover {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}

.btn--small { font-size: var(--fs-xs, 0.76rem); }

.offer__link { width: 100%; }

.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 2px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--fs-sm, 0.82rem);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.back:hover { color: var(--color-accent-hover); }

/* 全部チェックが付いた時だけ、終わりのボタンを強めに出す(押せなくはしない)。
   ★ 途中でやめてよい。**押せないボタンを置かない**(04-01/04-03からの引き継ぎ)。 */
#btn-plan-done.is-ready { box-shadow: var(--shadow-cta-glow, none); }

/* ===== 版表示 =====
   ★ 04-01 ID258: ユーザーテストで「是正が効いていない」ように見えた時、
     **キャッシュで古い版が動いていたのか、直っていないのか**を切り分ける手段が無かった。
     テストのたびに「どの版を触ったか」を確定できるようにする。 */
.build-stamp {
  margin: var(--space-3) 0 0;
  font-size: 0.66rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* ===== 日本語組版(完成基準9) ===== */

/* カタカナ複合語を途中で折らない。分割は app-state.js splitKatakanaSegments が行う */
.no-break-katakana { white-space: nowrap; }

/* 地の文は通常の改行点を使わせる(禁則を効かせるため)。
   カタカナ語の保護は上の .no-break-katakana が個別に担う
   (04-02 ID148 と同じ考え方: CSSの全面適用ではなくトークン単位で守る)。 */
.hero__title,
.hd h2,
.lead,
.note,
.opt__t,
.opt__s,
.tell,
.steps li,
.warn,
.src,
.check__btn,
.offer,
.disclosure {
  word-break: normal;
  overflow-wrap: anywhere;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 完成基準7: prefers-reduced-motion で動きを止める =====
   design-tokens.css 側にも一括対応(*, *::before, *::after)があるが、
   **依存を前提にしない。**このファイルで新設した動きをここでも明示して止める。

   ★ 04-03 ID249 の教訓: 自分の点検が `animation` だけを数えていて `transition` を
     見落とし、`.quiz-opt` が漏れていた。**animation と transition の両方**を数えること。
     このファイルで動きを持つのは:
       animation … .screen:not([hidden])
       transition … .opt / .check__btn / .btn--ghost / .time__fill
     の5つ。ここに5つとも書く。 */
@media (prefers-reduced-motion: reduce) {
  .screen:not([hidden]) {
    animation: none;
  }
  .opt,
  .check__btn,
  .btn--ghost,
  .time__fill {
    transition-duration: 0.01ms;
  }
}

/* ハブ復帰導線のタップ対象については、ここには何も置かない。
   ★ 2026-08-29(ID271)に 90×18 / 112×24 / 54×16 を検出して**このツールの中だけ**を
     暫定で上書きしていたが、**原因は design-tokens.css(正本)側で全ツール共通**だった。
     ID275 で正本が直った(--hub-tap-min: 44px)ため、**この上書きは削除した**(ID276)。
     暫定の上書きを残すと、正本が直ったことに誰も気づかないまま二重管理になる。 */
/* 手順画面の主操作。出どころ(参考資料)より**前**に置く。
   ★ 実測で、出どころの後ろに置くと 320px で top=1021px になり、
     次へ進む手段が「出どころを全部スクロールした先」になっていた。 */
.act {
  margin-top: var(--space-2);
}

/* 安全上の注意(製造元の原文)。**要約せず全文を出す。** */
.warn__slot-h {
  display: block;
  margin-bottom: 4px;
}

/* ③は類型名だけ。原文の全文は出どころ側(.src__safety)に置く。
   ★ 原文3件を全文でここに出したら、注意欄が 494〜614px になり、
     主操作が top=887〜1123px へ押し出された(実測)。 */
.warn__types {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
  color: var(--color-text);
}

.warn__types li { margin-bottom: 3px; }

.warn__ptr {
  margin: 5px 0 0;
  color: var(--color-text-muted);
}

/* 由来が本製品でない文に添える帰属。**目立たせて、混同を防ぐ。** */
.warn__from {
  display: block;
  margin-top: 2px;
  color: var(--color-warning);
}

/* 取得できなかった類型のための1行(自作の注意文ではなく、行動の指示)。 */
.warn__fallback {
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--color-warning);
  color: var(--color-warning);
}

/* 出どころ側に置く、安全上の注意の原文。**要約しない。** */
.src__safety {
  margin: 0 0 6px;
  padding-left: 1.1em;
}

.src__safety li { margin-bottom: 6px; }

.src__safety b {
  display: block;
  color: var(--color-text);
}

.src__quote {
  display: block;
  color: var(--color-text);
}

/* 由来製品の明記。**別製品の文言を本製品の注意として無帰属で出さない。** */
.src__from {
  display: block;
  color: var(--color-warning);
}

.src__fallback {
  margin: 0 0 6px;
  color: var(--color-warning);
}

/* ハブフッターの3つ目の子(プライバシーの1行)。
   .hub-footer は flex なので、そのままだとブランド・ナビと同じ行に並ぼうとする。
   幅いっぱいで折り返して、独立した1行にする。 */
.hub-footer__privacy {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-xs, 0.75rem);
}

/* ===== 手順の前に出す禁止文(ID281)=====
   ★ 製造元の「使用しないでください」は、手順を読む前に目に入る位置に置く。
     ID277 の監査で、この文が y=524(手順1は y=202)にあり
     320×568 では読む前に画面が尽きていることが実測された。
   ★ 出す経路は ABSあり だけ。他経路は hidden なのでレイアウトは変わらない。 */
.notice {
  margin-bottom: var(--space-2);
  padding: 10px 12px;
  background: var(--color-bg);
  border: 2px solid var(--color-danger);
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.notice[hidden] { display: none; }

.notice__before {
  margin: 0;
  font-weight: 700;
  color: var(--color-danger);
}

.notice__quote {
  margin: 4px 0 0;
  color: var(--color-text);
}

.notice__from,
.notice__after {
  margin: 4px 0 0;
  font-size: var(--fs-xs, 0.75rem);
  color: var(--color-text-muted);
}

/* 開示の中の法令リンク。地の文の中のリンクなので、文の流れを壊さない
   (44px の下限は、独立した操作要素に掛ける指標であって、文中のリンクには掛けない)。 */
.offer__pr a {
  color: var(--color-accent-hover);
}

/* ===== この手順のもとになった記事(ID288 ③)=====
   ★ 記事リンクは「導線」ではなく**結論の出どころ**として出す(04-03 と同型)。
     静的HTMLに置いてあるので、リンクグラフの実測にも検索側にも出る。 */
.source-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.source-section__title {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}

.source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.source-list li {
  font-size: var(--fs-sm, 0.82rem);
  line-height: 1.55;
}

.source-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.source-note {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs, 0.72rem);
  color: var(--color-text-muted);
}

/* ===== 法令導線のタップ対象(ID303。ID300 監査の条件)=====
   ★ 地の文の中に置いたままでは 44px にできない(縦に広げると行が重なる)。
     **文と分けて独立した行に出し**、そのうえで 44px を確保する。
   ★ それまでは「文中のリンクには 44px を掛けない」という扱いを status.md に書いていたが、
     **監査の判断で、法令導線は独立した操作要素として扱うことになった**(2026-08-29)。 */
.offer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 2px;
}

.offer__pr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-accent-hover);
}

/* ★★ 防御(2026-09-03 maker)★★
   `.no-break-katakana` は**カタカナ語の途中改行を防ぐためだけ**のラッパーで、
   見た目を持つ意図は無い。ところが element セレクタ(`.move span` `.quiz-opt__text span`
   `.tell span` 等)は**このラッパーにも当たる。**
   実測(2026-09-03): 公開中の 09-03 で `.move span { display: block }` が
   「次の1杯:豆の量を増やす(**コーヒー**:水 = …)」の「コーヒー」に当たり、
   1つの文が**3行に割れて**いた(小さい灰色の別行になっていた)。06-01 でも同じ形が出ていた。
   → **改行のためだけの入れ物は、他のスタイルを受け取らない**ようにここで固定する。
   セレクタを `span.no-break-katakana`(0,1,1)にして、`.xxx span`(0,1,1)と同点にしたうえで
   **ファイル末尾に置いて後勝ちにしている。**位置を動かすと効かなくなる。 */
span.no-break-katakana {
  display: inline;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* 再訪帯(ID351。2026-09-04)                                          */
/* ------------------------------------------------------------------ */

/* 復元された時にだけ出る1枚。
   ★ .btn(強アクセント)を使わないのは、この帯が操作の主役ではないため——
     続きの画面と同じ強さで「始め直す」を出すと、戻ってきた人を先に消す側へ誘導する。
   ★ min-height:44px はタップ対象の基準(完成基準)。文字数で幅が落ちないよう
     padding は左右に持たせ、width は内容なりにする。 */
.resume {
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent-strong);
  background: var(--color-surface);
}

.resume[hidden] {
  display: none;
}

.resume__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, var(--color-text));
}

.resume__restart {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.2rem;
  border: 0;
  background: none;
  /* ★ 色は --color-accent-strong ではなく --color-accent-hover を使う。
     2026-09-04 実測: 帯の背景 #f2e9dc に対して
       --color-accent-strong #c93a14 = 4.26:1(**AA 4.5:1 に届かない**。
       14.4px/600 は WCAG の「大きな文字」(18.66px 太字)に当たらないため 4.5:1 が要る)
       --color-accent-hover  #a12d0f = 6.03:1(合格)
     hover は色をさらに動かさず下線で示す——これ以上暗くすると本文色と見分けが付かない。 */
  color: var(--color-accent-hover);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.resume__restart:hover {
  text-decoration: underline;
}

/* ===== 共有ブロック(queue ID381)=====
   ★ 04-02 の同型ブロックの**書き方をコピー**した(標準A1)。共通CSSに寄せない——
     配信バンドルは階層を跨げず、各ツールが自前の style.css を持つ設計のため。
   ★ 手入力欄の min-height:44px は ID307 の実測(288x31.6=44px未満)に由来する。 */
.share-section {
  margin-top: var(--space-3);
  text-align: center;
}
.share-section__lead {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}
.share-section__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}
.share-section__status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}
.share-section__status[hidden] {
  display: none;
}
.share-section__manual-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--measure);
  margin: var(--space-1) auto 0;
  padding: 0.5em 0.7em;
  /* ★ 2026-08-29(ID307 の全数走査で発見。実測 288x31.6 = 44px 未満)。
       04-01 と同一の部品・同一の是正。読み取り専用だが、
       **利用者がタップして選択・コピーする欄**なので操作要素として扱う。 */
  min-height: 44px;
  font-size: 0.85rem;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}
.share-section__manual-input[hidden] {
  display: none;
}