/* 記事切り抜き 試作 — スタイル
   スマートフォンのタッチ操作を主対象にする。
   ボタンは指で押しやすい大きさ（最低44px相当）を確保する。
   画像読込み後は、Instagramの投稿編集画面に近い1画面型（小さなヘッダー／常に見える
   大きなキャンバス／下部固定ツールバー＋ボトムシート）で編集する。
   配色は「温かい紙色・墨色・朱のアクセント」で、新聞の切り抜き・編集室を思わせる
   トーンにする。外部フォント・画像素材は使わず、色とCSS・インラインSVGのみで作る。 */

:root {
  --color-bg: #f6f1e6; /* 温かい紙色 */
  --color-surface: #fffdf7; /* カード・パネルの紙面 */
  --color-text: #2b241d; /* 墨色（暖かい黒） */
  --color-text-soft: #6b5f52;
  --color-accent: #b3402a; /* 朱色（校正の朱入れをイメージ） */
  --color-accent-bg: #f6e2da;
  --color-accent-ink: #7a2c1c; /* 朱の濃色（テキスト用） */
  --color-blue: #1a5fb4; /* 青のアクセント */
  --color-blue-bg: #dfe9f6;
  --color-border: #ddd0ba;
  --color-panel-bg: #efe7d6;
  --color-notice-bg: #f6e2da;
  --color-required: #b3402a;
  --color-comment-bg: #fbeecb;
  --color-candidate: #9c7a1f; /* 見出し候補の目印色（アクセントの朱と区別する） */
  --radius-card: 14px;
  --shadow-card: 0 4px 16px rgba(43, 36, 29, 0.08);
  --touch-min: 44px;
  /* window.visualViewport の高さ（px）。JS側で常に最新値へ更新する。
     未対応環境向けに、まずJSのフォールバック値が入るまでの初期値を100vhにしておく。 */
  --vv-height: 100vh;
  /* 編集画面の高さ：キーボードの表示では変えない（JSが window.innerHeight から設定する） */
  --app-height: 100vh;
  /* iPhoneのセーフエリア（ホームインジケータ等）。非対応環境では0として扱われる。 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.6;
}

/* 横スクロールを発生させない。
   htmlとbody両方にoverflow-xを指定すると、bodyが独自のスクロール
   コンテナになってしまい、内部のposition:stickyが効かなくなる
   （実際にスクロールしているのはhtml側のため）。htmlだけに指定する。 */
html {
  overflow-x: hidden;
}

header, main, footer {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px;
}

/* 編集画面（#step-edit）を表示している間は、mainの幅上限・左右余白を外し、
   キャンバスがiPhoneでは実質フル幅、Mac等の広い画面でも大きく使えるようにする。
   （:has()はSafari 15.4+/Chrome 105+で対応。未対応環境ではmax-width:480pxのまま
   ＝これまでどおりの表示になるだけで、機能そのものは損なわれない。） */
main:has(> #step-edit:not([hidden])) {
  /* 2026-10-23-9：iPadなど広い画面でも紙面を大きく出すため、幅の上限（以前は640px）を外す */
  max-width: none;
  padding: 0;
}

h1 {
  font-size: 1.15rem;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: 0.02em;
}

h2 {
  font-size: 1rem;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  border-left: 4px solid var(--color-accent);
  padding-left: 8px;
  margin-top: 0;
}

.notice {
  background: var(--color-notice-bg);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
}

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

.hint {
  font-size: 0.9rem;
  color: var(--color-text-soft);
}

label {
  display: block;
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: bold;
}

.required {
  color: var(--color-required);
  font-weight: normal;
  font-size: 0.8rem;
}

input[type="text"],
input[type="date"],
textarea {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-top: 4px;
}

input[type="range"] {
  width: 100%;
  margin-top: 8px;
}

textarea {
  background: var(--color-comment-bg);
  resize: vertical;
}

fieldset {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-top: 12px;
}

button {
  display: inline-block;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 10px 18px;
  margin: 6px 4px 6px 0;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

button:active:not(:disabled) {
  transform: scale(0.96);
}

button:disabled {
  background: #b7a98c;
  cursor: not-allowed;
}

/* チェックボックス付きの補助ラベル（マーカーの吸着・動きの一括オフなど） */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: normal;
  margin-top: 10px;
  min-height: var(--touch-min);
}

.checkbox-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

input[type="file"] {
  margin-top: 8px;
}

/* --- 画像読込み画面：使ってみたくなる「プロダクト画面」に見せるヒーローカード --- */
.hero-step {
  border-top: none;
  padding-top: 24px;
}

.hero-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 22px 24px;
  text-align: center;
}

.hero-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  color: var(--color-accent);
}

.hero-icon svg {
  width: 100%;
  height: 100%;
}

.hero-title {
  font-size: 1.3rem;
  line-height: 1.4;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  border-left: none;
  padding-left: 0;
  margin: 0 0 10px;
  color: var(--color-text);
}

.hero-lead {
  font-size: 0.92rem;
  color: var(--color-text-soft);
  margin: 0 0 14px;
}

.local-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-blue-bg);
  color: var(--color-blue);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: bold;
  margin: 0 auto 12px;
}

.local-badge svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.hero-note {
  font-size: 0.78rem;
  color: var(--color-text-soft);
  margin: 0 0 4px;
}

/* --- 画像読込み：撮影／選択の2ボタン --- */
.file-input-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.file-btn {
  flex: 1;
  min-width: 140px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: bold;
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(43, 36, 29, 0.06);
}

.file-btn-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.file-btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 3px 10px rgba(179, 64, 42, 0.3);
}

/* --- 引用範囲を画面に合わせるボタン --- */
.fit-btn {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  background: #2f7d3a;
}

.fit-btn:disabled {
  background: #b7a98c;
}

/* --- 新聞名プリセットなど、選択式ボタン群の共通スタイル --- */
.mode-buttons {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.mode-btn {
  flex: 1;
  background: var(--color-surface);
  color: var(--color-text);
  margin: 0;
}

.mode-btn.active {
  background: var(--color-accent);
  color: #fff;
}

/* 背景スタイルなど、項目数が多く折り返しが必要なボタン列 */
.mode-buttons.wrap-buttons {
  flex-wrap: wrap;
}

.mode-buttons.wrap-buttons .bg-style-btn,
.mode-buttons.wrap-buttons .source-badge-style-btn {
  flex: 0 0 auto;
  min-width: 72px;
}

#source-badge-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

/* --- コメントの背景スタイル選択ボタン（色つき、選択中は太い枠で示す） --- */
.bg-style-btn {
  border: 2px solid var(--color-border);
  font-size: 0.8rem;
}

.bg-style-btn-none {
  background: repeating-linear-gradient(
    45deg,
    var(--color-surface),
    var(--color-surface) 6px,
    var(--color-panel-bg) 6px,
    var(--color-panel-bg) 12px
  );
  color: var(--color-text);
}

.bg-style-btn.active {
  border-color: var(--color-accent);
  border-width: 3px;
}

/* ============================================================
   画像読込み後の1画面編集
   #step-edit を、小さなヘッダー／常に見える大きなキャンバス／
   ボトムシート／下部固定ツールバーの縦積みflexにする。
   高さは window.visualViewport（キーボード表示時などに変化する）に
   追従させ、長い縦スクロールが生まれないようにする。
   main の左右パディングを打ち消し、ツールバー等を横幅いっぱいに使う。
   ============================================================ */
#step-edit {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding-top: 0;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  border-top: none;
  /* 2026-10-23-9：以前は画面の高さより24px低くしていた（紙面の下に使わない帯が残っていた） */
  height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden;
  background: var(--color-bg);
}

/* display:flex が hidden 属性より優先され、読込み画面・切り抜き画面の下に編集画面が
   表示されたままになっていたため、明示的に隠す */
#step-edit[hidden] {
  display: none;
}

/* --- 小さなヘッダー --- */
#editor-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  padding-top: calc(4px + var(--safe-top));
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

#editor-header-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-text-soft);
  min-width: 0;
}

/* 開いた説明は、ヘッダーの下に重ねて表示する（ヘッダーの高さを変えず、キャンバスを動かさない） */
#editor-header {
  position: relative;
}

#editor-header-text[open] > p {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 100%;
  z-index: 20;
  margin: 4px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* 「詳しく」などで開ける説明（details.more-info）の共通の見た目 */
.more-info > summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-text-soft);
}

.more-info > summary::-webkit-details-marker {
  display: none;
}

.more-info > summary::after {
  content: " ⓘ";
}

.more-info[open] > summary::after {
  content: " ×";
}

.sheet-panel .more-info {
  margin: 4px 0 8px;
}

.sheet-panel .more-info > summary {
  font-size: 0.85rem;
  padding: 6px 0;
}

.sheet-panel .more-info > p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-soft);
}

.editor-header-btn {
  flex: 0 0 auto;
  min-height: var(--touch-min);
  padding: 4px 8px;
  margin: 0;
  font-size: 0.85rem;
  background: var(--color-surface);
  color: var(--color-text);
  white-space: nowrap;
}

/* --- 初回だけの操作案内バナー：キャンバスの外（editor-headerの下）に置き、
   選択枠やキャンバスには一切重ならない。閉じるとlocalStorageに記録される。 --- */
#first-run-hint {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-blue-bg);
  border-bottom: 1px solid var(--color-border);
}

/* display:flex が hidden 属性より優先されて×で閉じられなかったため、明示的に隠す */
#first-run-hint[hidden] {
  display: none;
}

#first-run-hint p {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-blue);
}

#first-run-hint-close {
  flex: 0 0 auto;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--color-blue);
  font-size: 1.1rem;
  line-height: 1;
}

.editor-header-btn:disabled {
  background: var(--color-surface);
  color: var(--color-border);
  opacity: 0.6;
}

/* ============================================================
   キャンバスビューポート：ツール（フローティングバー）・ポップオーバー
   （旧ボトムシート）・ズームHUD・アクション行は、すべてこの上に「重なる」
   絶対配置のオーバーレイとして置く。ツールの開閉やパネル切替でこの箱自体の
   大きさは一切変わらないため、キャンバスの表示サイズ・画像の位置やズームは
   常に維持される。
   ============================================================ */
#canvas-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 8px 12px 4px;
  border-radius: 8px;
  overflow: hidden;
  /* 完成画像（キャンバス）の外側は、紙面や仕上がりの色と紛らわしくない、明確に
     「作業用の余白」とわかる中立なグレーの縞模様にする。書き出しにはこの領域は
     一切含まれない。 */
  background:
    repeating-linear-gradient(
      135deg,
      #babcc0 0px,
      #babcc0 10px,
      #a9abaf 10px,
      #a9abaf 20px
    );
  border: 1px solid var(--color-border);
}

/* 完成画像エリア＝canvas要素そのものの境界を、周囲の作業用余白とはっきり区別する */
#edit-canvas {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(20, 20, 22, 0.75), 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* 「完成画像エリア」表示：キャンバスの境界は枠線と影で区別できるため、上部の操作帯と
   重なる小さなラベルは表示しない（要素とJSの位置計算は残す） */
#canvas-frame-label,
#canvas-frame-label:not([hidden]) {
  display: none;
}

#canvas-frame-label {
  position: absolute;
  z-index: 4;
  transform: translateY(-100%);
  padding: 3px 8px;
  margin-bottom: 4px;
  border-radius: 4px 4px 0 0;
  background: rgba(20, 20, 22, 0.75);
  color: #fff;
  font-size: 0.66rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

#canvas-wrap {
  position: absolute;
  inset: 0;
  /* 下側はフローティングツールバーの高さぶん、常に余白を確保しておく
     （ツールバーの表示・非表示でキャンバスの実効表示サイズを変えないよう、
     開閉に関係なく常にこの余白を確保する）。パネルを開いている間は、
     JS（refreshCanvasWrapReserve）がこの初期値の上から4辺の余白を書き換え、
     完成画像全体がパネルの下に隠れないようにする。 */
  /* 上側は操作帯（#canvas-topbar、高さ44px＋上下6px）のぶんを確保する */
  padding: 56px 14px 76px;
  padding-bottom: calc(76px + var(--safe-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  /* viewZoom（表示ズーム）のtranslate+scaleは、canvasViewport左上を原点とする
     px単位の計算（setViewZoom等）を前提にしている。transform-originを既定の
     中央（50% 50%）のままにすると、scaleが要素中心を基準にかかってしまい、
     ピンチ操作の中心が指の位置からずれる（拡大縮小のたびに位置が飛ぶ）原因になる。
     原点を左上（0 0）に揃えることで、計算どおりピンチ中心の紙面位置が指の下に
     留まるようにする。 */
  transform-origin: 0 0;
}

canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Canvas上のドラッグ・2本指ピンチ・トラックパッドのジェスチャーを、iPhoneでも
   Mac Chromeでも確実にアプリ側へ渡す（ブラウザ標準のページズーム・スクロールに
   奪われないようにする）。 */
#edit-canvas {
  touch-action: none;
  overscroll-behavior: contain;
}

/* --- キャンバス上部の操作帯：「仕上がり」切替と表示の拡大縮小を1行に並べる。
   キャンバスは帯の下から始まる（#canvas-wrap の上側の余白＝帯の高さ）ため、通常の表示では
   紙面や取っ手に重ならない。帯そのものは指の操作を通し、ボタンだけが操作を受け取る。 --- */
#canvas-topbar {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
  pointer-events: none;
}

#canvas-topbar > * {
  pointer-events: auto;
}

/* 「仕上がり」トグル：帯の左端。ツール切替では動かない */
#finished-view-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 6px 12px 6px 9px;
  margin: 0;
  border-radius: 999px;
  background: rgba(43, 36, 29, 0.78);
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
}

#finished-view-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

#finished-view-toggle[aria-pressed="true"] {
  background: var(--color-accent);
}

/* 「画像を動かす」：オンの間は色を変え、紙面の周りにも色の枠を出して、いま画像全体を動かしていると分かるようにする */
#image-move-toggle {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 6px 12px 6px 9px;
  margin: 0;
  border-radius: 999px;
  background: rgba(43, 36, 29, 0.78);
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#image-move-toggle svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

#image-move-toggle[aria-pressed="true"] {
  background: #1a5fb4;
}

#canvas-viewport.image-move-mode {
  box-shadow: inset 0 0 0 4px #1a5fb4;
}

/* 表示の拡大縮小：帯の右端 */
#zoom-hud {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1px;
  background: rgba(43, 36, 29, 0.78);
  border-radius: 999px;
  padding: 2px;
}

.zoom-hud-btn {
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 7px;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1;
}

.zoom-hud-btn:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
  transform: none;
}

.zoom-hud-value {
  min-width: 50px;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.zoom-hud-fit {
  min-width: auto;
  padding: 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  margin-left: 2px;
}

/* --- 追加操作中のキャンセル、選択中要素の削除：キャンバス下端に浮かぶ小さな行 --- */
#canvas-action-row {
  position: absolute;
  left: 50%;
  bottom: 66px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 6;
  max-width: calc(100% - 16px);
}

#action-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

#action-buttons .tool-btn {
  min-width: 56px;
  min-height: 44px;
  padding: 8px 10px;
  white-space: nowrap;
}

#action-buttons .tool-btn[hidden] {
  display: none;
}

.tool-btn.quiet-btn {
  background: rgba(43, 36, 29, 0.82);
}

/* 範囲の角度：指で押しやすい大きさのボタンとスライダー */
#angle-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 14px;
  background: rgba(43, 36, 29, 0.86);
  color: #fff;
  width: 340px;
  max-width: 100%;
}

#angle-controls[hidden] {
  display: none;
}

.angle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.angle-btn {
  flex: 1 1 0;
  min-height: 44px;
  margin: 0;
  padding: 4px 2px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
}

.angle-btn.angle-wide {
  flex: 2 1 0;
}

.angle-value {
  flex: 1 1 0;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

#angle-slider {
  width: 100%;
  min-height: 32px;
  margin: 0;
}

/* 操作の状況表示：キャンバスの上の1行。空でも高さを保ち、キャンバスの位置を動かさない */
#edit-status {
  flex: 0 0 auto;
  height: 1.5em;
  margin: 4px 14px 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#edit-status:empty {
  visibility: hidden;
}

#cancel-add-btn {
  background: var(--color-text-soft);
}

.tool-btn.delete-btn {
  background: var(--color-required);
}

#cancel-add-btn[hidden],
.delete-btn[hidden] {
  display: none;
}

/* --- コメントのインライン編集オーバーレイ：選択中コメントの矩形に正確に重ねて
   配置する（位置・大きさはJSが毎回計算してインラインスタイルへ書き込む）。
   文字色を透明にし、Canvas側の描画（実際の書体・色・効果つき）をそのまま見せながら、
   カーソル（caret）と選択範囲のハイライトだけは見えるようにする。 --- */
/* --- 文字の直接編集：紙面の文字と同じ位置・見た目で重ねる（JSが位置・書体・色・飾りを合わせる） --- */
.comment-inline-editor {
  position: absolute;
  z-index: 6;
  margin: 0;
  border: none;
  border-radius: 0;
  outline: 2px dashed rgba(26, 95, 180, 0.85);
  outline-offset: 2px;
  resize: none;
  overflow: hidden;
  transform-origin: 0 0;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
  -webkit-text-size-adjust: 100%;
}
.comment-inline-editor[hidden] {
  display: none;
}
.comment-inline-editor::placeholder {
  color: rgba(43, 36, 29, 0.45);
}
.inline-done-btn {
  position: absolute;
  z-index: 8;
  width: auto;
  min-width: 88px;
  min-height: 44px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-blue);
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  touch-action: manipulation;
}
.inline-done-btn[hidden] {
  display: none;
}

/* --- シートの背後の半透明スクリム：タップで閉じる。
   フローティングツールバー（z-index 8）より下に置き、シートを開いたままでも
   ツールバーのタブ切替はそのまま操作できるようにする。 --- */
#sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(43, 36, 29, 0.28);
  z-index: 7;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#sheet-scrim.scrim-visible {
  opacity: 1;
}

#sheet-scrim[hidden] {
  display: none;
}

/* --- ポップオーバー（旧ボトムシート）：画像の上に重なるカードとして浮かぶ。
   選択中の要素・見せたい範囲を隠さない側（上下、広い画面では左右も）をJS側
   （applySheetDock）が選び、位置（--sheet-base-x/-y）・大きさ（width/max-height）を
   px単位で計算してそのつどインラインスタイルへ書き込む。ここでは、その値を
   「transformで動かす」ことだけを担当する。left/right/top/bottomをdockごとに
   使い分けると値がautoへ切り替わり飛んでしまうため、常にtransform（translate）だけで
   動かすことで、どの側へ移っても滑らかにアニメーションする。つまみ行をドラッグすると
   自由な位置へ動かせ（--sheet-drag-x/--sheet-drag-y、基準位置に加算する）、最小化ボタンで
   タイトル行だけに畳める（.sheet-minimized）。内容はカード内部だけでスクロールする。
   開閉に軽いスライド＋フェードの動きを付ける（[hidden]切替えの直後にJS側で
   .sheet-open を付け外しし、opacityを遷移させる）。 --- */
#bottom-sheet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: rgba(239, 231, 214, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 28px rgba(43, 36, 29, 0.25);
  padding: 12px 12px 14px;
  transform: translate(
    calc(var(--sheet-base-x, 10px) + var(--sheet-drag-x, 0px)),
    calc(var(--sheet-base-y, 10px) + var(--sheet-drag-y, 0px) + 8px)
  );
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), width 0.24s ease, max-height 0.24s ease;
}

#bottom-sheet.sheet-open {
  transform: translate(
    calc(var(--sheet-base-x, 10px) + var(--sheet-drag-x, 0px)),
    calc(var(--sheet-base-y, 10px) + var(--sheet-drag-y, 0px))
  );
  opacity: 1;
}

#bottom-sheet[hidden] {
  display: none;
}

/* 最小化：タイトル行だけを残し、本体を畳む */
#bottom-sheet.sheet-minimized {
  max-height: none;
  overflow: visible;
  padding-bottom: 4px;
}
#bottom-sheet.sheet-minimized #sheet-body {
  display: none;
}
#bottom-sheet.sheet-minimized::before {
  display: none;
}

/* シート上端の「つまみ」（iOSのボトムシートを思わせる装飾。画像等は使わずCSSのみ）。
   ドラッグ操作の対象であることも示す。 */
#bottom-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  margin: -6px auto 10px;
  border-radius: 2px;
  background: var(--color-border);
}

#sheet-handle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

#sheet-title {
  font-size: 1.02rem;
  font-weight: bold;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  color: var(--color-accent-ink);
  flex: 1 1 auto;
  min-width: 0;
}

#sheet-minimize-btn,
#sheet-close-btn {
  flex: 0 0 auto;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: 0 12px;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1;
  white-space: nowrap;
}

.sheet-panel[hidden] {
  display: none;
}

.sheet-panel .hint {
  margin-top: 0;
}

.sheet-panel label:first-child {
  margin-top: 0;
}

/* --- フローティングツールバー：6つのツール。画像の上に浮かぶ丸みのあるバーとして
   下端中央に固定し、開閉してもキャンバスの表示サイズには影響しない。 --- */
#toolbar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 10px;
  z-index: 8;
  display: flex;
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(43, 36, 29, 0.22);
  margin-bottom: var(--safe-bottom);
  overflow: hidden;
}

.tool-tab-btn {
  flex: 1 1 0;
  min-height: 52px;
  min-width: var(--touch-min);
  margin: 0;
  padding: 7px 1px 6px;
  border-radius: 0;
  border-top: 3px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* iPhone幅（7つで1つ約50px）でも4文字のラベルが1行に収まる大きさ */
  font-size: 0.72rem;
  white-space: nowrap;
  background: transparent;
  color: var(--color-text-soft);
}

.tool-tab-icon {
  width: 20px;
  height: 20px;
}

.tool-tab-label {
  line-height: 1;
}

.tool-tab-btn.active {
  background: var(--color-accent-bg);
  color: var(--color-accent-ink);
  border-top-color: var(--color-accent);
  font-weight: bold;
}

/* ツール内の「追加」ボタン・プレビューボタンなど（ボトムシート内） */
.tool-btn {
  min-width: 96px;
  margin: 0;
  padding: 8px 10px;
  font-size: 0.95rem;
  background: var(--color-accent);
  color: #fff;
}

.tool-btn.cancel-btn {
  background: var(--color-text-soft);
}

.tool-btn.preview-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: #3f6b4a;
}

.tool-btn.detect-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: var(--color-candidate);
}

/* --- 見出し候補（試作機能）：一覧・採用／却下ボタン --- */
.headline-detect-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

/* --- スタンプ（図形・矢印・記号）：パレットと選択中の図形の設定 --- */
.stamp-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.stamp-palette {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 6px;
}

.stamp-btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  margin: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.stamp-btn svg {
  width: 22px;
  height: 22px;
}

.stamp-btn-glyph {
  font-size: 1.2rem;
  font-weight: 900;
}

#shape-edit-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

.swatch-btn-none {
  background: repeating-linear-gradient(
    45deg,
    var(--color-surface),
    var(--color-surface) 5px,
    var(--color-panel-bg) 5px,
    var(--color-panel-bg) 10px
  );
}

.candidate-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.candidate-list li {
  padding: 8px;
  margin-bottom: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-candidate);
  border-radius: 6px;
  font-size: 0.9rem;
}

.candidate-list li.selected {
  border-width: 2px;
  background: #faf1da;
}

.candidate-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.candidate-btn-row .stepper-btn {
  flex: 1 1 auto;
  min-width: 64px;
}

.candidate-accept-btn {
  background: var(--color-accent);
  color: #fff;
}

/* --- 仕上げ：マスク方式ごとの調整スライダー --- */
.mask-param-row {
  margin-top: 10px;
}

.mask-param-row[hidden] {
  display: none;
}

.mode-controls {
  margin-top: 10px;
  padding: 10px;
  background: var(--color-panel-bg);
  border-radius: 6px;
}

/* --- 引用範囲一覧・サイズ調整 --- */
#rect-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

#rect-list li {
  padding: 8px;
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

#rect-list li.selected {
  border-color: var(--color-accent);
  border-width: 2px;
  background: var(--color-accent-bg);
}

.stepper-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.stepper-label {
  font-size: 0.9rem;
  font-weight: bold;
  width: 100%;
}

.stepper-btn {
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.9rem;
  padding: 8px 10px;
  margin: 0;
}

.stepper-btn.danger {
  background: #f6d3d3;
  color: var(--color-required);
}

.stepper-btn.active {
  background: var(--color-accent);
  color: #fff;
}

/* --- 微調整（±ボタン）：主要な操作はハンドルのドラッグなので、
   こちらは折りたたみ、小さく控えめな見た目にする --- */
.fine-adjust {
  margin-top: 10px;
}

.fine-adjust summary {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  cursor: pointer;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
}

.fine-adjust .stepper-row {
  margin-top: 4px;
  opacity: 0.85;
}

.fine-adjust .stepper-btn {
  font-size: 0.88rem;
  padding: 6px 8px;
  min-height: 36px;
}

/* --- コメント文字サイズ・書体 --- */
.font-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.font-btn {
  background: var(--color-surface);
  color: var(--color-text);
  margin: 0;
}

.font-btn.active {
  background: var(--color-accent);
  color: #fff;
}

/* --- 書体プレビューチップ：ボタンの文字自体をその書体で表示する --- */
.font-chip[data-family="system"],
.font-chip[data-badge-family="system"] { font-family: -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif; }
.font-chip[data-family="gothic"],
.font-chip[data-badge-family="gothic"] { font-family: "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }
.font-chip[data-family="maru"],
.font-chip[data-badge-family="maru"] { font-family: "Hiragino Maru Gothic ProN", "UD Digi Kyokasho N-R", "Yu Gothic", sans-serif; }
.font-chip[data-family="mincho"],
.font-chip[data-badge-family="mincho"] { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; }
.font-chip[data-family="shinbun"],
.font-chip[data-badge-family="shinbun"] { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-weight: 900; letter-spacing: 0.03em; }
.font-chip[data-family="hand"],
.font-chip[data-badge-family="hand"] { font-family: "Klee One", "Yuji Syuku", "Hiragino Maru Gothic ProN", cursive, "Yu Gothic", sans-serif; }
.font-chip[data-family="boldgothic"],
.font-chip[data-badge-family="boldgothic"] { font-family: "Hiragino Sans", "Yu Gothic", sans-serif; font-weight: 900; }
.font-chip[data-family="manga"],
.font-chip[data-badge-family="manga"] { font-family: "Hiragino Sans", "Yu Gothic", sans-serif; font-weight: 900; letter-spacing: 0.02em; text-shadow: -1px -1px 0 currentColor, 1px 1px 0 rgba(0,0,0,0.15); }
.font-chip[data-family="typewriter"],
.font-chip[data-badge-family="typewriter"] { font-family: "Osaka-Mono", "Courier New", "Hiragino Sans", monospace; letter-spacing: 0.04em; }
.font-chip[data-family="pop"],
.font-chip[data-badge-family="pop"] { font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; font-weight: 900; letter-spacing: 0.05em; }

/* --- 現在選択中の色（名称）表示 --- */
.current-color-label {
  font-size: 0.82rem;
  font-weight: normal;
  color: var(--color-text-soft);
  margin-left: 6px;
}

/* --- カスタム色（ネイティブのカラーピッカー）：スウォッチと並べて置く小さなラベル --- */
.custom-color-swatch-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  cursor: pointer;
  vertical-align: top;
}

.custom-color-swatch-label input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
  cursor: pointer;
}

/* --- 道具の中の小見出し（マーカー・囲みの「図形」など） --- */
.stamp-category-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-text-soft);
  margin: 12px 0 2px;
}

.marker-edit-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}

/* --- コメントの文字色・背景色プリセット --- */
.swatch-row {
  margin-top: 10px;
}

.swatch-list {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.swatch-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  margin: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
}

.swatch-btn.active {
  border-color: var(--color-accent);
  border-width: 3px;
}

.status {
  font-size: 0.9rem;
  color: var(--color-text-soft);
  min-height: 1.2em;
}

.status.error {
  color: var(--color-required);
  font-weight: bold;
}

/* 面積の目安：判定ではなく事実の提示なので、エラー色（赤）とは分けて
   確認を促す色（アンバー）にする。 */
.status.caution {
  color: #8a4b00;
  font-weight: bold;
}

/* 「試験機能」であることを正直に伝える注意書き */
.feature-caution {
  background: var(--color-notice-bg);
  border-left: 3px solid #8a4b00;
  border-radius: 4px;
  padding: 8px 10px;
  color: #6b4400;
}

/* --- 保存前の案内：適法性を断定せず、確認と責任の所在だけを短く伝える --- */
.legal-hint {
  font-size: 0.88rem;
  color: var(--color-text-soft);
  background: var(--color-panel-bg);
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 8px 0;
}

footer {
  font-size: 0.8rem;
  color: var(--color-text-soft);
  border-top: 1px solid var(--color-border);
  margin-top: 24px;
}

/* --- プレビュー・保存共有モーダル --- */
.modal-overlay[hidden] {
  display: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

.modal-box {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  text-align: center;
}

.modal-box h2 {
  font-size: 1rem;
  border-left: 4px solid var(--color-accent);
  padding-left: 8px;
  margin: 0 0 8px;
  text-align: left;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.2rem;
  line-height: 1;
}

#save-modal-img,
#preview-modal-img {
  display: block;
  width: 100%;
  max-height: 60dvh;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin: 8px 0;
  background: var(--color-panel-bg);
}

.secondary-btn {
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  margin: 6px 0 0;
}

/* 入力欄の文字が16px未満だと、iPhoneのSafariは入力時に画面を自動で拡大してしまうため、
   入力欄は16px以上にそろえる（読みやすさのためにも小さくしない） */
input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

/* ============================================================
   記事の切り抜き画面（#step-crop）：写真全体を表示し、対象記事を四角で囲む。
   編集画面と同じく画面いっぱいを使い、下に「キャンセル／紙面全体で進む／この範囲で切り抜く」を置く。
   ============================================================ */
main:has(> #step-crop:not([hidden])) {
  max-width: 640px;
  padding: 0;
}

#step-crop {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(var(--vv-height) - 24px);
  max-height: calc(var(--vv-height) - 24px);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overflow: hidden;
  background: var(--color-bg);
}

#step-crop[hidden] {
  display: none;
}

#crop-header {
  flex: 0 0 auto;
  padding: 8px 14px 4px;
  padding-top: calc(8px + var(--safe-top));
}

#crop-title {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

#crop-header .hint {
  margin: 2px 0 0;
}

#crop-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #3a3632;
}

#crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#crop-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 12px;
  padding-bottom: calc(10px + var(--safe-bottom));
}

#crop-actions button {
  margin: 0;
  width: auto;
  flex: 0 1 auto;
}

/* 「この範囲で切り抜く」を右端の主ボタンにし、キャンセルは左に寄せる */
#crop-cancel-btn {
  margin-right: auto !important;
}

#crop-actions button[hidden] {
  display: none;
}

#recrop-btn {
  margin-bottom: 4px;
}

/* 「OCRで読めた文字を確認」の行ごとの判定理由 */
.ocr-raw-reason {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--color-text-soft);
}

/* OCRの診断（送った画像・OCRサーバーの数値）。改行をそのまま表示する */
.ocr-diagnostics {
  margin: 4px 0 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-surface);
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-line;
  color: var(--color-text-soft);
}

/* ============================================================
   候補の確認画面（全画面）。紙面の該当箇所を大きく表示し、操作ボタンは紙面の外（下）に置く。
   ============================================================ */
.review-open-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 4px 0 6px;
}

.review-open-row button {
  margin: 0;
}

#review-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  height: var(--vv-height, 100vh);
  background: #24211e;
  color: #f4efe6;
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

#review-screen[hidden] {
  display: none;
}

#review-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}

#review-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-top-btn {
  flex: 0 0 auto;
  margin: 0;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.9rem;
}

.review-top-btn[aria-pressed="true"] {
  background: var(--color-blue);
}

/* 紙面の表示領域：画面の残りすべてを使う（ボタン・説明はこの外） */
#review-view {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #3a3632;
}

#review-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 紙面全体での位置（右上の小さな縮図）。タップでその位置へ移動 */
#review-minimap {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  touch-action: none;
}

/* タップした位置のOCRの結果（紙面の上に大きく。タップした位置と反対側の端に置く） */
#review-probe {
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 12px;
  border: 3px solid #888;
  background: rgba(20, 18, 16, 0.92);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

#review-probe[hidden] {
  display: none;
}

#review-probe.at-top {
  top: 8px;
}

#review-probe.at-bottom {
  bottom: 8px;
}

#review-probe.none {
  border-color: #ff5a5a;
}

#review-probe.candidate {
  border-color: #4cc46a;
}

#review-probe.excluded {
  border-color: #ffb02e;
}

#review-probe.adopted {
  border-color: #3d8bff;
}

#review-probe-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.35;
}

#review-probe-detail {
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: #eee6d8;
  max-height: 6.5em;
  overflow-y: auto;
}

.review-probe-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.review-probe-btns button {
  flex: 1 1 0;
  margin: 0;
  min-height: 48px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 10px;
}

#review-probe-adopt {
  background: var(--color-accent);
  color: #fff;
}

#review-probe-adopt[hidden] {
  display: none;
}

#review-probe-close {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

#review-info {
  flex: 0 0 auto;
  padding: 6px 12px 0;
  min-height: 3.2em;
}

#review-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#review-reason {
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: #cfc5b6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#review-actions {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 1fr;
  gap: 6px;
  padding: 8px 8px;
}

#review-actions button {
  margin: 0;
  min-height: 52px;
  padding: 6px 4px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 10px;
}

#review-actions button:disabled {
  opacity: 0.35;
}

.review-nav-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.review-reject-btn {
  background: #5b5650;
  color: #fff;
}

.review-adopt-btn {
  background: var(--color-accent);
  color: #fff;
}

#review-more {
  flex: 0 0 auto;
  padding: 0 10px calc(6px + var(--safe-bottom));
  max-height: 45vh;
  overflow-y: auto;
  color: var(--color-text);
}

#review-more > details {
  margin: 0;
  background: var(--color-surface);
  border-radius: 8px;
  padding: 2px 8px;
}

#review-more > details > summary {
  color: var(--color-text-soft);
}

/* iPhoneなど幅の狭い画面：上の帯に「仕上がり」「画像を動かす」「全体表示」が1行に収まるよう、
   表示の－・％・＋は隠す（2本指のピンチで拡大縮小でき、「全体表示」で戻せる） */
@media (max-width: 430px) {
  #zoom-out-btn,
  #zoom-in-btn,
  #zoom-reset-btn {
    display: none;
  }
  #finished-view-toggle,
  #image-move-toggle {
    padding: 6px 10px 6px 8px;
    font-size: 0.8rem;
  }
}

/* よく使う出典の一覧 */
.source-preset-list {
  list-style: none;
  margin: 6px 0;
  padding: 0;
}

.source-preset-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.source-preset-label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}

.source-preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-preset-btns .stepper-btn {
  min-height: 40px;
}

/* 文字の読み取り（OCR）の状態表示：上の帯のすぐ下、中央 */
#ocr-progress {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 6px 14px 6px 32px;
  border-radius: 999px;
  background: rgba(26, 95, 180, 0.92);
  color: #fff;
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

#ocr-progress[hidden] {
  display: none;
}

#ocr-progress::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: ocr-spin 0.9s linear infinite;
}

#ocr-progress[data-state="done"] {
  background: rgba(46, 125, 50, 0.92);
}

#ocr-progress[data-state="error"] {
  background: rgba(176, 42, 30, 0.94);
}

#ocr-progress[data-state="done"]::before,
#ocr-progress[data-state="error"]::before {
  animation: none;
  border: none;
  content: "✓";
  width: auto;
  height: auto;
  margin-top: -0.6em;
  line-height: 1.2;
}

#ocr-progress[data-state="error"]::before {
  content: "!";
}

@keyframes ocr-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ocr-progress::before {
    animation: none;
  }
}

/* 角度の操作を開くボタン：開いている間は色を変える */
#angle-toggle-btn.active {
  background: #1a5fb4;
}

/* 上のヘッダー：「画像をOCRへ送信」は折り返さず1行（入りきらなければ省略記号）。狭い画面では
   元に戻す・やり直すを記号だけにして（読み上げ用の名前は残す）、縦に崩れないようにする */
#editor-header-text > summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-header-btn {
  white-space: nowrap;
}

@media (max-width: 460px) {
  #editor-header {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }
  #undo-btn,
  #redo-btn {
    min-width: 44px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 1.1rem;
  }
  #undo-btn .header-btn-label,
  #redo-btn .header-btn-label {
    display: none;
  }
}

/* ============================================================
   写真の補正画面（#step-correct）：切り抜き画面と同じく画面いっぱいを使う。
   四隅の丸は指で押しやすい大きさにし、動かす間は拡大鏡を上の隅に出す。
   ============================================================ */
main:has(> #step-correct:not([hidden])) {
  max-width: 640px;
  padding: 0;
}

#step-correct {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(var(--vv-height) - 24px);
  max-height: calc(var(--vv-height) - 24px);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  overflow: hidden;
  background: var(--color-bg);
}

#step-correct[hidden] {
  display: none;
}

#correct-header {
  flex: 0 0 auto;
  padding: 8px 14px 2px;
  padding-top: calc(8px + var(--safe-top));
}

#correct-title {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

#correct-header .hint {
  margin: 2px 0 0;
}

#correct-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 4px 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #3a3632;
}

#correct-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

#correct-loupe {
  position: absolute;
  top: 8px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  background: #3a3632;
}

#correct-loupe[hidden],
#correct-busy[hidden] {
  display: none;
}

#correct-busy {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-weight: bold;
}

#correct-tools {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 12px 0;
}

.correct-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.correct-btn {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: bold;
  white-space: nowrap;
}

.correct-btn.correct-small {
  padding: 6px 4px;
}

.correct-btn.correct-wide {
  flex: 1 1 auto;
}

.correct-btn[aria-pressed="true"] {
  background: #1a5fb4;
  color: #fff;
}

.correct-btn:disabled {
  opacity: 0.4;
}

#correct-fine-slider {
  flex: 1 1 auto;
  min-width: 60px;
  min-height: 36px;
  margin: 0;
}

#correct-fine-value {
  flex: 0 0 3.6em;
  text-align: right;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

#correct-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 12px;
  padding-bottom: calc(10px + var(--safe-bottom));
}

#correct-actions button {
  margin: 0;
  width: auto;
}

.correct-impact-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.correct-impact-btns button {
  margin: 0;
  width: auto;
}

#photo-correct-btn {
  margin-bottom: 4px;
}

/* ---- 補正画面：細かな回転の行はスライダーを幅いっぱいに。＋／−を続けて押してもページが拡大しないよう、
   操作部分だけダブルタップでの拡大を止める（2本指でのページの拡大はそのまま使える） ---- */
#correct-tools,
#crop-actions,
#correct-actions,
#canvas-action-row {
  touch-action: manipulation;
}

.correct-btn.correct-grow {
  flex: 1 1 auto;
}

.correct-fine-row #correct-fine-slider {
  flex: 1 1 auto;
  height: 44px;
  min-height: 44px;
}

/* スライダーのつまみを指で押しやすい大きさに */
#correct-fine-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

#correct-fine-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: var(--color-border);
}

#correct-fine-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

#correct-fine-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: var(--color-border);
}

#correct-fine-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 3px solid #fff;
}

/* 進み具合・失敗の表示 */
#correct-busy {
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  text-align: center;
}

#correct-busy p {
  margin: 0;
}

#correct-busy.error {
  background: rgba(60, 10, 6, 0.86);
}

#correct-busy-btns {
  display: flex;
  gap: 8px;
}

#correct-busy-btns[hidden] {
  display: none;
}

#correct-busy-btns button {
  margin: 0;
  width: auto;
}

/* 下の操作の行：戻る（左）・保存・進む（右）を1行に並べ、iPhoneの幅でも折り返さない */
#crop-actions,
#correct-actions {
  flex-wrap: nowrap;
  justify-content: flex-start;
}

#crop-actions button,
#correct-actions button {
  flex: 0 0 auto;
  min-height: 44px;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
}

#crop-confirm-btn,
#correct-confirm-btn {
  margin-left: auto !important;
}

#crop-cancel-btn {
  margin-right: 0 !important;
}

/* ---- 保存の窓・続きから再開 ---- */
#save-draft-modal .modal-box button {
  width: 100%;
  margin: 6px 0 0;
}

#save-draft-modal .modal-box button.modal-close {
  width: auto;
  margin: 0;
}

.draft-list-block {
  margin-top: 12px;
}

.draft-list-title {
  margin: 0 0 6px;
  font-size: 1rem;
}

#draft-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.draft-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
}

.draft-item img {
  width: 44px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}

.draft-info {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
}

.draft-item button {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  min-height: 44px;
  padding: 6px 10px;
}

/* 読込み画面：保存したファイルから再開 */
.resume-file-btn {
  display: block;
  margin-top: 10px;
  text-align: center;
}

/* 読み取り方（試験）の切り替えと「詳しく読み直す」 */
.ocr-mode-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.ocr-mode-label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}
.ocr-mode-label input {
  margin-top: 3px;
  flex: none;
}
/* 共通のボタンの表示指定（.tool-btn の display）より優先して、hidden のときは隠す（速い読み取りが完了したときだけ出す） */
#ocr-full-reread-btn[hidden] {
  display: none;
}

/* ============================================================
   スマホでの押しやすさ・読みやすさ（2026年10月15日）
   iPhoneの画面幅（390px前後）で、よく使う操作を指で押しやすく（44px以上）、
   説明・ラベルを読みやすい大きさにする。キャンバスの広さと拡大位置は変えない。
   ============================================================ */

/* hidden 属性の付いた要素は、ほかの表示指定（display）より優先して隠す
   （「編集へ戻る」「編集をやめる」「詳しく読み直す」などが、隠したつもりで表示されていた） */
[hidden] {
  display: none !important;
}

/* 読込み画面の小さな説明 */
.hero-note,
.local-badge span {
  font-size: 0.875rem;
}

/* 入力欄・スライダー・チェックボックスを指で操作しやすい大きさに */
input[type="text"],
input[type="date"],
input[type="number"],
select {
  min-height: 44px;
}

input[type="range"] {
  min-height: 44px;
}

.checkbox-row input[type="checkbox"],
.ocr-mode-label input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: none;
}

.ocr-mode-label {
  align-items: center;
  min-height: 44px;
  font-size: 0.9rem;
  font-weight: normal;
  margin-top: 0;
}

/* 小さなボタン（±・調整・登録の編集など）も44px以上に */
.stepper-btn,
.fine-adjust .stepper-btn,
.source-preset-btns .stepper-btn {
  min-height: 44px;
}

/* 「詳しく」などの開閉：文字の周りまで押せるように */
.sheet-panel .more-info > summary,
.fine-adjust summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-size: 0.9rem;
}

/* --- 編集画面のヘッダー：記号だけにせず「戻す」「やり直す」の文字も出す --- */
#editor-header-text > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.85rem;
}

.editor-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 0.85rem;
}

.header-btn-icon {
  font-size: 1.05rem;
  line-height: 1;
}

@media (max-width: 460px) {
  #undo-btn,
  #redo-btn {
    font-size: 0.85rem;
    padding-left: 7px;
    padding-right: 8px;
  }
  #undo-btn .header-btn-label,
  #redo-btn .header-btn-label {
    display: inline;
  }
}

/* 初回の案内は短く1〜2行に */
#first-run-hint p {
  font-size: 0.9rem;
}

/* --- キャンバス上部の「仕上がり」「画像を動かす」「全体表示」：高さ44px --- */
#finished-view-toggle,
#image-move-toggle {
  min-height: 44px;
}

#finished-view-toggle svg,
#image-move-toggle svg {
  width: 18px;
  height: 18px;
}

.zoom-hud-btn {
  min-width: 44px;
  min-height: 40px;
}

@media (max-width: 430px) {
  #finished-view-toggle,
  #image-move-toggle {
    font-size: 0.85rem;
  }
}

/* --- 下のツールバー：アイコンとラベルを大きく、押せる高さを広く --- */
.tool-tab-btn {
  min-height: 60px;
  gap: 4px;
  font-size: 0.8rem;
}

.tool-tab-icon {
  width: 24px;
  height: 24px;
}

/* --- ボトムシートの「小さく」「閉じる」 --- */
#sheet-minimize-btn,
#sheet-close-btn {
  min-height: 44px;
  font-size: 0.9rem;
}

/* --- 切り抜き・補正の画面：説明は短く、下の「戻る／保存／進む」は幅いっぱいに大きく --- */
#crop-header .hint,
#correct-header .hint {
  font-size: 0.9rem;
}

#crop-actions,
#correct-actions {
  gap: 8px;
}

#crop-actions button,
#correct-actions button {
  flex: 1 1 0;
  min-height: 50px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 1rem;
  font-weight: bold;
}

#crop-actions #crop-save-btn,
#correct-actions #correct-save-btn {
  flex: 0.75 1 0;
}

#crop-actions #crop-confirm-btn,
#correct-actions #correct-confirm-btn {
  flex: 1.9 1 0;
  margin-left: 0 !important;
}

.correct-row .correct-btn {
  flex: 1 1 0;
  min-height: 46px;
  font-size: 0.92rem;
  padding-left: 6px;
  padding-right: 6px;
}

.correct-row.correct-fine-row .correct-btn {
  flex: 0 0 auto;
  min-width: 48px;
}

/* --- 候補の確認画面：上の「閉じる」「OCR結果」 --- */
.review-top-btn {
  min-height: 44px;
}

/* 選んだ要素の操作（角度・設定・削除）の行：大きくしたツールバー（高さ60px）と重ならないよう上へ */
#canvas-action-row {
  bottom: calc(80px + var(--safe-bottom));
}

/* 色の丸：指で押しやすい大きさ（42px）と間隔（8px） */
.swatch-list {
  gap: 8px;
}

.swatch-btn,
.custom-color-swatch-label input[type="color"] {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
}

/* 「全体表示」も高さ44px */
.zoom-hud-fit {
  min-height: 44px;
}

#zoom-hud {
  padding: 0;
}

/* ============================================================
   iPhoneでの操作性（2026年10月17日）：よく使う操作（仕上がり・画像を動かす・全体表示、
   候補の採用、角度、保存）を押しやすく、文字を読みやすくする。キャンバスの大きさは変えない。
   ============================================================ */

/* --- 上の帯：高さ48px、文字14.4px、アイコン付き。帯の高さ（4px＋48px）は、キャンバスの上の
   余白（56px）の内側に収め、紙面に重ねない --- */
#canvas-topbar {
  top: 4px;
  height: 48px;
}

#finished-view-toggle,
#image-move-toggle {
  min-height: 48px;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  font-size: 0.9rem;
}

#finished-view-toggle svg,
#image-move-toggle svg,
.zoom-hud-fit svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.zoom-hud-fit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 48px;
  padding: 0 12px 0 10px;
  font-size: 0.9rem;
  font-weight: bold;
}

@media (max-width: 430px) {
  #finished-view-toggle,
  #image-move-toggle {
    padding: 6px 10px 6px 9px;
    font-size: 0.9rem;
  }
  .zoom-hud-fit {
    border-left: none;
    margin-left: 0;
  }
}

/* 読み取り中の表示は、大きくした帯のすぐ下に */
#ocr-progress {
  top: 58px;
}

/* --- 選んだ要素の操作（採用・却下・角度・設定・削除）：高さ48px。
   「採用」は太字で幅を広く、「削除」は白地に赤の枠にして、隣の「採用」（赤地）と見分けやすく、少し離す --- */
#action-buttons {
  gap: 10px;
}

#action-buttons .tool-btn {
  min-height: 48px;
  padding: 8px 12px;
  font-size: 1rem;
}

#action-buttons #candidate-adopt-quick-btn {
  min-width: 92px;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#action-buttons .tool-btn.delete-btn {
  margin-left: 6px;
  background: #fff;
  color: var(--color-required);
  box-shadow: inset 0 0 0 2px var(--color-required);
  font-weight: bold;
}

/* --- 角度：ボタンは高さ48px、スライダーは指で押しやすい高さ・つまみに --- */
.angle-btn {
  min-height: 48px;
  font-size: 0.95rem;
}

#angle-slider {
  min-height: 44px;
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

#angle-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
}

#angle-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -11px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1a5fb4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

#angle-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
}

#angle-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1a5fb4;
}

/* --- 以前の保存ボタンの指定（ヘッダーの「保存」・仕上げの「端末に保存」は 2026-10-23-10/11 で廃止。指定は害が無いため残す） --- */
#edit-save-btn {
  min-width: 64px;
  font-weight: bold;
}

.header-btn-svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

#save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin: 8px 0 0;
  font-size: 1.05rem;
  font-weight: bold;
}

#save-btn svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

#download-btn {
  min-height: 48px;
}

/* --- 確認画面の「採用」「却下」：記号付きの文字を読みやすく --- */
#review-actions .review-adopt-btn {
  font-size: 1.05rem;
}

/* ヘッダー：狭い画面ではボタンの間隔を少し詰める */
@media (max-width: 430px) {
  #editor-header {
    gap: 4px;
  }
}

/* 角度の操作：縦長の範囲（縦書きの見出しなど）を選んだとき、横幅いっぱいの角度の操作が範囲の取っ手を
   隠していた。幅を狭くし、範囲と反対側の端へ逃がせるようにする（位置は positionCanvasActionRow） */
#angle-controls {
  width: 252px;
  padding: 6px;
}

#angle-controls .angle-row {
  gap: 4px;
}

#angle-controls .angle-btn {
  min-width: 0;
  padding: 4px 1px;
  font-size: 0.88rem;
}

#angle-controls .angle-value {
  font-size: 0.95rem;
}

/* 角度の操作を開いている間は、その下の「角度・設定・削除」の行を隠し、操作の塊を小さくする
   （角度の操作には「閉じる」があり、閉じれば行は戻る）。縦長の範囲の取っ手の間に収まるようにする */
#canvas-action-row:has(#angle-controls:not([hidden])) #action-buttons {
  display: none;
}

#angle-controls {
  width: 236px;
  padding: 4px;
  gap: 4px;
}

#angle-controls #angle-auto-btn {
  flex: 2.2 1 0;
}

#angle-controls #angle-reset-btn {
  flex: 0.8 1 0;
}

/* 角度の値はスライダーの左に */
.angle-slider-row .angle-value {
  flex: 0 0 auto;
  min-width: 3.4em;
  text-align: left;
  padding-left: 4px;
}

.angle-slider-row #angle-slider {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* ============================================================
   紙面を主役にしたスマホ画面（2026年10月20日）
   ・幅600px以下：紙面の左右の余白を小さくし、紙面を広く表示する
   ・パネルを開いている間は下のツールバーを隠す（パネルの「閉じる」で戻る）。
     紙面はパネルの実際の高さの分だけ縮める（refreshCanvasWrapReserve / applySheetDock）
   ・「配置」の先頭に、切り抜き直し・補正の大きな入口を置く
   ============================================================ */
@media (max-width: 600px) {
  #canvas-viewport {
    margin: 4px 4px 2px;
  }
  #canvas-wrap {
    padding-left: 6px;
    padding-right: 6px;
  }
  /* パネルを開いている間も道具の帯は隠さない（2026-11-07。パネルは帯の上に置く＝sheetToolbarClearance） */
}

/* --- 「配置」：切り抜き直し・補正の入口（アイコン＋説明つきの大きなボタン） --- */
.place-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.place-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: inset 0 0 0 2px var(--color-border);
  text-align: left;
}

#recrop-btn.place-action-btn {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.place-action-btn svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: var(--color-accent);
}

.place-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.place-action-text strong {
  font-size: 1rem;
}

.place-action-text small {
  font-size: 0.85rem;
  color: var(--color-text-soft);
  line-height: 1.35;
}

/* 出力の縦横比：狭い画面で文字が1文字に縮まっていたため、3列の格子にして折り返す */
#canvas-ratio-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

#canvas-ratio-buttons .ratio-mode-btn {
  min-width: 0;
  min-height: 44px;
  padding: 6px 4px;
  white-space: normal;
  line-height: 1.25;
  font-size: 0.9rem;
}

/* --- 切り抜き直しの見通し（確定したら今の編集がどうなるか） --- */
.crop-impact {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-blue-bg);
  color: var(--color-blue);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* --- 「見せる」：候補の確認を大きな主ボタンに、詳しく読み直すも幅いっぱいに --- */
#review-open-btn,
#ocr-full-reread-btn {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  font-size: 1rem;
  font-weight: bold;
}

.sheet-panel[data-panel="show"] .headline-detect-block {
  margin-top: 8px;
  padding-top: 4px;
}

#review-ocr-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* --- 「仕上げ」：プレビューと保存を、外側の表示のすぐ下に --- */
.sheet-panel[data-panel="finish"] .preview-btn {
  min-height: 48px;
  font-weight: bold;
}

/* 「仕上げ」：プレビューと保存を横に並べ、パネルを開いてすぐ届く位置に */
.finish-actions {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 8px;
  margin-top: 10px;
}

.finish-actions .preview-btn,
.finish-actions #save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}

.finish-actions svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.sheet-panel[data-panel="finish"] .mask-param-row input[type="range"] {
  margin-top: 2px;
}

/* 必須の印も読める大きさに */
.required {
  font-size: 0.85rem;
}

/* ---- 切り抜き画面：「次へ」と「枠を解除」、下書きの自動保存の状態（2026年10月） ---- */
#crop-actions #crop-whole-btn {
  flex: 0.9 1 0;
}

.autosave-status {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.autosave-status.error {
  padding: 6px 8px;
  border-radius: 6px;
  background: #f6d3d3;
  color: var(--color-required);
  font-weight: bold;
}

/* ============================================================
   連打で画面全体が拡大されないようにする（2026年10月20日）
   iPhoneのSafariは、同じ場所を素早く2回たたくと「ダブルタップで拡大」として扱い、2回目のタップが操作に
   ならないことがある。押す要素と、その入れ物（パネル・確認画面・窓など、中だけスクロールする所を含む）に
   touch-action: manipulation を指定して、ダブルタップ拡大だけを止める。2本指での画面の拡大縮小と
   スクロールはそのまま使える。紙面などのキャンバスは、より具体的な指定（touch-action: none）のまま
   アプリが2本指の操作を受け取る。
   ============================================================ */
html,
body,
button,
a,
input,
select,
textarea,
label,
summary,
[role="button"],
#step-load,
#step-edit,
#bottom-sheet,
#sheet-body,
#review-screen,
#review-more,
#review-info,
#review-actions,
.modal-overlay,
.modal-box,
#draft-list {
  touch-action: manipulation;
}

/* 連打したときに、ボタンの文字が選択（青く反転）されないようにする */
button,
summary,
.tool-tab-btn,
.file-btn {
  -webkit-user-select: none;
  user-select: none;
}

/* 続けて押すボタンは、隣との間を8px以上あけて押し間違えを減らす */
.angle-row,
#angle-controls .angle-row,
.stepper-row,
.font-buttons,
#review-actions {
  gap: 8px;
}

/* ヘッダー：「戻す」と「やり直す」の間を8pxに（狭い画面では左右の余白を少し詰めて幅を保つ） */
#redo-btn {
  margin-left: 4px;
}

@media (max-width: 430px) {
  #editor-header {
    padding-left: 6px;
    padding-right: 6px;
  }
}

/* 角度の「0°」も幅44px以上に */
#angle-controls #angle-reset-btn {
  flex: 0 0 48px;
}

/* --- 自分のライブラリ（この端末）：作品のサムネイル一覧と、作品の窓 --- */
.library-block {
  margin-top: 12px;
}
.library-grid {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.library-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px;
  background: var(--color-bg, #fff);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: left;
  font-weight: normal;
  touch-action: manipulation;
}
.library-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: var(--color-surface);
}
.library-card-title {
  font-size: 0.85rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.library-card-meta {
  font-size: 0.75rem;
  color: var(--color-muted, #666);
}
.library-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.library-badge {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-muted, #666);
}
.library-badge.share {
  border-color: #c98a00;
  color: #8a5d00;
  background: #fff6db;
}
.library-modal-box {
  text-align: left;
}
.library-modal-box h2 {
  padding-right: 48px;
  word-break: break-all;
}
#library-modal-img {
  display: block;
  max-width: 100%;
  max-height: 46dvh;
  margin: 8px auto;
  border: 1px solid var(--color-border);
}
.library-version-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.library-version {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 84px;
  min-height: 44px;
  margin: 0;
  padding: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid transparent;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: normal;
  touch-action: manipulation;
}
.library-version[aria-pressed="true"] {
  border-color: var(--color-accent);
}
.library-version img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border-radius: 3px;
}
.library-version-date {
  font-size: 0.7rem;
  color: var(--color-muted, #666);
}
#library-resume-btn {
  width: 100%;
  margin-top: 8px;
}
.library-export {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.library-export button {
  width: 100%;
  margin-top: 8px;
}
.library-block .more-info {
  margin-top: 12px;
}
/* ライブラリの補助の文字も読める大きさに */
.library-card-meta,
.library-badge,
.library-version-date {
  font-size: 0.82rem;
}
.library-version {
  font-size: 0.88rem;
  width: 96px;
}

/* --- 自動加工：完成プレビュー（画像を大きく見せ、主な操作は大きなボタン2つ） --- */
#step-auto {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--vv-height);
  padding: calc(6px + var(--safe-top)) calc(10px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(10px + var(--safe-left));
  background: var(--color-bg);
}
#step-auto[hidden] {
  display: none;
}
#auto-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
#auto-header .secondary-btn {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px;
  font-size: 0.95rem;
  touch-action: manipulation;
}
#auto-title {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}
#auto-stage {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
#auto-canvas {
  display: block;
  max-width: 100%;
  max-height: calc(var(--vv-height) * 0.62);
  width: auto;
  height: auto;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  background: #fff;
  touch-action: manipulation;
  cursor: zoom-in;
}
#auto-busy {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(43, 36, 29, 0.82);
  color: #fff;
  text-align: center;
}
#auto-busy[hidden] {
  display: none;
}
#auto-busy p {
  margin: 0;
  font-size: 0.95rem;
}
.auto-summary {
  margin: 8px 2px 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.auto-summary.error {
  color: var(--color-accent-ink);
  background: var(--color-notice-bg);
  padding: 8px 10px;
  border-radius: 8px;
}
#auto-source-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
#auto-source-row[hidden] {
  display: none;
}
.auto-source-field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
}
.auto-source-field select,
.auto-source-field input {
  width: 100%;
  min-height: var(--touch-min);
  font-size: 16px;
}
#auto-actions {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 10px;
  margin-top: 10px;
}
.auto-big-btn {
  margin: 0;
  width: 100%;
  min-height: 56px;
  font-size: 1.08rem;
  font-weight: bold;
  touch-action: manipulation;
}
#auto-actions .secondary-btn {
  margin: 0;
}
#auto-save-btn[hidden] {
  display: none;
}
#auto-save-btn[hidden] + #auto-adjust-btn {
  grid-column: 1 / -1;
}
#auto-reapply-btn {
  touch-action: manipulation;
}
.auto-flow-hint {
  margin-top: 12px;
}
.settings-open-btn {
  touch-action: manipulation;
}

/* 拡大表示 */
.auto-zoom {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: auto;
  background: rgba(0, 0, 0, 0.88);
  padding: calc(52px + var(--safe-top)) 8px calc(16px + var(--safe-bottom));
}
.auto-zoom[hidden] {
  display: none;
}
.auto-zoom img {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  cursor: zoom-in;
}
.auto-zoom img.zoomed {
  width: 220%;
  max-width: none;
  cursor: zoom-out;
}
.auto-zoom .modal-close {
  position: fixed;
  top: calc(8px + var(--safe-top));
  right: 8px;
  z-index: 1;
}

/* --- 自動加工の設定 --- */
.settings-overlay {
  align-items: stretch;
  padding: calc(8px + var(--safe-top)) 8px calc(8px + var(--safe-bottom));
}
.settings-box {
  text-align: left;
  max-width: 560px;
  max-height: none;
  height: 100%;
}
.settings-box h2 {
  padding-right: 48px;
}
.settings-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.settings-section h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.settings-fixed {
  margin: 4px 0;
  font-size: 0.92rem;
}
.settings-label {
  margin: 10px 0 2px;
  font-size: 0.92rem;
  font-weight: bold;
}
.settings-box select,
.settings-box input[type="text"] {
  width: 100%;
  min-height: var(--touch-min);
  font-size: 16px;
}
.settings-add-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.settings-add-row .secondary-btn {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
.settings-slider-row input[type="range"] {
  width: 100%;
}
.settings-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.settings-swatch {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.8rem;
  touch-action: manipulation;
}
.settings-swatch.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}
#settings-done-btn {
  width: 100%;
  margin-top: 12px;
}
.settings-box .mode-btn,
.settings-box .checkbox-row,
.settings-box button {
  touch-action: manipulation;
}
.auto-mask-note {
  margin: 8px 2px 0;
  padding: 6px 10px;
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  font-size: 0.88rem;
  line-height: 1.5;
}
.auto-mask-note[hidden] {
  display: none;
}

/* --- 写真の向き（「配置」の先頭）：大きく押しやすい3つのボタン --- */
.orient-block {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.orient-title {
  margin: 0 0 6px;
  font-weight: bold;
  font-size: 0.95rem;
}
.orient-now {
  font-weight: normal;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}
.orient-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.orient-btn {
  margin: 0;
  width: 100%;
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: bold;
  touch-action: manipulation;
}
#orient-reset-btn {
  grid-column: 1 / -1;
  min-height: 48px;
  font-size: 1rem;
}

/* --- 大きさの縦のつまみ（選んだ文字・スタンプ）：右端に細く置き、紙面と文字を隠さない --- */
#size-rail {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: min(46%, 300px);
  min-height: 170px;
  pointer-events: none;
}
#size-rail[hidden] {
  display: none;
}
.size-rail-label {
  font-size: 0.8rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
#size-rail-track {
  position: relative;
  flex: 1 1 auto;
  width: 44px;
  border-radius: 22px;
  background: rgba(43, 36, 29, 0.38);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  touch-action: none;
  cursor: ns-resize;
}
#size-rail-fill {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 6px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.85);
}
#size-rail-thumb {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* --- 文字の見た目：文字だけ／背景あり（目立つ2択） --- */
.text-look-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin: 6px 0 10px;
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  overflow: hidden;
}
.text-look-btn {
  margin: 0;
  border-radius: 0;
  min-height: 46px;
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: bold;
  touch-action: manipulation;
}
.text-look-btn.active {
  background: var(--color-accent);
  color: #fff;
}

/* --- 簡易編集：編集画面の道具を隠し、下の帯（＋文字・＋スタンプ・削除・完了）だけにする --- */
#step-edit.simple-mode #toolbar,
#step-edit.simple-mode #export-btn,
#step-edit.simple-mode #autosave-chip,
#step-edit.simple-mode #change-image-btn,
#step-edit.simple-mode #editor-header-text,
#step-edit.simple-mode #canvas-topbar {
  display: none !important;
}
#simple-bar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 8px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--safe-bottom);
}
#simple-bar[hidden] {
  display: none;
}
.simple-main-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 0.9fr;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.94);
  box-shadow: 0 4px 18px rgba(43, 36, 29, 0.22);
}
.simple-btn {
  margin: 0;
  min-height: 48px;
  padding: 6px 4px;
  font-size: 0.98rem;
  font-weight: bold;
  touch-action: manipulation;
}
.simple-btn.secondary-btn {
  width: auto;
}
.simple-done {
  background: var(--color-blue);
}
#simple-text-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.94);
  box-shadow: 0 4px 14px rgba(43, 36, 29, 0.2);
  flex-wrap: wrap;
}
#simple-text-row[hidden] {
  display: none;
}
.simple-look {
  margin: 0;
  flex: 1 1 100%;
}
.simple-colors {
  display: flex;
  gap: 6px;
  flex: 1 1 auto;
}
.simple-color {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  touch-action: manipulation;
}
.simple-color.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}
.simple-small-btn {
  margin: 0;
  min-height: 44px;
  padding: 6px 10px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  touch-action: manipulation;
}

/* --- 完成プレビューの任意の書き足し（小さく1行） --- */
.auto-extras {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.auto-extras[hidden] {
  display: none;
}
.auto-extra-btn {
  flex: 1 1 0;
  margin: 0;
  min-height: 44px;
  padding: 6px 4px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-size: 0.95rem;
  touch-action: manipulation;
}
.auto-extra-btn[hidden] {
  display: none;
}

/* --- 完成プレビューの「判定の詳細」 --- */
.auto-detail {
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  font-size: 0.9rem;
}
.auto-detail[hidden] {
  display: none;
}
.auto-detail summary {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
}
.auto-detail-list {
  margin: 4px 0;
  padding-left: 1.6em;
  line-height: 1.5;
}
.auto-detail-list li.ok::marker {
  color: #1b7f3b;
  font-weight: bold;
}
.auto-detail-list li.ng::marker {
  color: #b35a00;
  font-weight: bold;
}
/* --- 完成プレビューの「向きが違うとき」（いまの向きから回した見本3つ。1回のタップで直す） --- */
.auto-orient-row {
  margin-top: 8px;
  padding: 6px 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}
.auto-orient-row[hidden] {
  display: none;
}
.auto-orient-row.attention {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg);
}
.auto-orient-label {
  margin: 0 0 4px;
  font-size: 0.9rem;
  font-weight: bold;
}
.auto-orient-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.auto-orient-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  min-height: 72px;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: bold;
  touch-action: manipulation;
}
.auto-orient-choice canvas {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* 「マーカー・囲み」は2行にする（iPhone幅で8つの道具が重ならないように） */
.tool-tab-label-2 {
  white-space: normal;
  text-align: center;
  line-height: 1.05;
  font-size: 0.68rem;
}
/* 下のツールバー：iPhone幅（600px未満）では、よく使う5つ（見せる・コメント・スタンプ・出典・仕上げ）と
   「その他」の6つだけを並べ、ラベルを小さくしない。配置・マーカー・囲み・個別加工は「その他」のメニューから開く */
#toolbar .tool-tab-label {
  font-size: 0.8rem;
}
.tool-more-btn {
  display: none;
}
@media (max-width: 599px) {
  #toolbar .tool-secondary {
    display: none;
  }
  .tool-more-btn {
    display: flex;
  }
}
#tool-more-menu {
  position: absolute;
  right: 8px;
  bottom: calc(80px + var(--safe-bottom));
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(300px, calc(100% - 16px));
  padding: 8px;
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.98);
  box-shadow: 0 6px 22px rgba(43, 36, 29, 0.28);
}
#tool-more-menu[hidden] {
  display: none;
}
.tool-more-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-align: left;
  touch-action: manipulation;
}
.tool-more-item strong {
  font-size: 1rem;
}
.tool-more-item small {
  font-size: 0.85rem;
  color: var(--color-text-soft);
}
/* 選んだものが右寄りのときは、大きさのつまみを左に出す（文字を隠さない） */
#size-rail.rail-left {
  right: auto;
  left: 6px;
}

/* ============================================================
   紙面中心の配置（2026-10-23-9）
   ・パネルは固定（横長＝右、縦長＝下）。ドラッグで動かす「つまみ」は出さない
   ・パネルの地は不透明にし、後ろの紙面の文字が透けて操作の文字が読みにくくならないようにする
   ・パネルを開いても紙面は暗くしない（タップで閉じる働きは残す）
   ・横長の画面：道具の帯を左の縦列、表示の操作を右の縦列にし、紙面を高さいっぱいに使う
   ============================================================ */
#bottom-sheet {
  background: var(--color-panel-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#bottom-sheet::before {
  display: none;
}
#sheet-scrim {
  background: transparent;
}
/* 紙面の上に重ねる操作の文字：読みやすい背景を付ける */
.size-rail-label {
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(43, 36, 29, 0.82);
  text-align: center;
  text-shadow: none;
}
#size-rail-track {
  background: rgba(43, 36, 29, 0.62);
}

#step-edit.layout-side #toolbar {
  left: 6px;
  right: auto;
  top: 6px;
  bottom: 6px;
  width: 84px;
  flex-direction: column;
  margin-bottom: 0;
}
#step-edit.layout-side .tool-tab-btn {
  min-height: 44px;
  padding: 4px 2px;
  border-top: none;
  border-left: 3px solid transparent;
}
#step-edit.layout-side .tool-tab-btn.active {
  border-left-color: var(--color-accent);
}
#step-edit.layout-side #tool-more-menu {
  left: 96px;
  right: auto;
  bottom: 8px;
}
#step-edit.layout-side #canvas-topbar {
  left: auto;
  right: 6px;
  top: 6px;
  width: 72px;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
#step-edit.layout-side #finished-view-toggle,
#step-edit.layout-side #image-move-toggle {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 4px 2px;
  border-radius: 12px;
  font-size: 0.78rem;
  white-space: normal;
  text-align: center;
  line-height: 1.1;
}
#step-edit.layout-side #zoom-hud {
  margin-left: 0;
  flex-direction: column;
  border-radius: 12px;
}
#step-edit.layout-side .zoom-hud-btn {
  width: 100%;
  min-height: 44px;
}
#step-edit.layout-side .zoom-hud-fit {
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 4px 2px;
  border-left: none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-left: 0;
  font-size: 0.78rem;
  white-space: normal;
  line-height: 1.1;
}
#step-edit.layout-side #simple-bar {
  left: 6px;
  right: auto;
  top: 6px;
  bottom: 6px;
  width: 156px;
  justify-content: flex-end;
  margin-bottom: 0;
}
#step-edit.layout-side .simple-main-row {
  grid-template-columns: 1fr;
}
#step-edit.layout-side #simple-text-row {
  display: flex;
  flex-direction: column;
}
#step-edit.layout-side #simple-text-row[hidden] {
  display: none;
}
/* 横長で高さの低い画面（横向きのiPhone）：道具は、よく使う5つと「その他」に絞る */
@media (max-height: 560px) {
  #step-edit.layout-side #toolbar .tool-secondary {
    display: none;
  }
  #step-edit.layout-side .tool-more-btn {
    display: flex;
  }
  #step-edit.layout-side #editor-header {
    padding-top: calc(2px + var(--safe-top));
    padding-bottom: 2px;
  }
}
#step-edit.layout-side #canvas-action-row {
  bottom: 12px;
}
/* 横長でさらに高さの低い画面（横向きのiPhone）：左の道具は2列、右は「仕上がり・画像を動かす・全体表示」だけ（拡大縮小は2本指で）。
   操作の案内（#edit-status）は、紙面の上部に重ねる細い帯にする（空のときは出さない） */
@media (max-height: 460px) {
  #step-edit.layout-side {
    position: relative;
  }
  #step-edit.layout-side #toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(52px, auto);
    align-content: center;
    width: 132px;
  }
  #step-edit.layout-side #zoom-out-btn,
  #step-edit.layout-side #zoom-in-btn,
  #step-edit.layout-side #zoom-reset-btn {
    display: none;
  }
  #step-edit.layout-side #edit-status {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: calc(var(--safe-top) + 46px);
    transform: translateX(-50%);
    max-width: 60%;
    height: auto;
    margin: 0;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(43, 36, 29, 0.86);
    color: #ffffff;
  }
  #step-edit.layout-side #edit-status:empty {
    display: none;
  }
}

/* 完成プレビュー（2026-10-23-9）：iPad縦では幅の上限を広げ、横長の画面では「左に完成画像・右に操作」の2列にする */
main:has(> #step-auto:not([hidden])) {
  max-width: 760px;
}
@media (min-width: 640px) and (orientation: landscape) {
  main:has(> #step-auto:not([hidden])) {
    max-width: none;
    padding: 0;
  }
  #step-auto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 36vw, 420px);
    grid-auto-rows: min-content;
    column-gap: 14px;
    align-content: start;
    height: var(--vv-height);
    overflow-y: auto;
  }
  #auto-header {
    grid-column: 1 / -1;
  }
  #auto-stage {
    grid-column: 1;
    grid-row: 2 / span 30;
    align-self: start;
    position: sticky;
    top: 0;
  }
  #auto-canvas {
    max-height: calc(var(--vv-height) - 70px - var(--safe-top) - var(--safe-bottom));
  }
  #step-auto > :not(#auto-header):not(#auto-stage) {
    grid-column: 2;
  }
}
/* 設定画面：広い画面（iPad横・Mac）では項目を2列に並べ、スクロールを減らす */
@media (min-width: 900px) {
  .settings-box {
    max-width: min(980px, calc(100vw - 32px));
    columns: 2;
    column-gap: 24px;
  }
  .settings-box > h2,
  .settings-box > .modal-close,
  .settings-box > p,
  .settings-box > #settings-done-btn {
    column-span: all;
  }
  .settings-section {
    break-inside: avoid;
  }
}

/* 文字の見た目の「色を反転」：3択の下に横いっぱいで置く */
.text-invert-btn {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 0;
  min-height: 44px;
  background: var(--color-bg);
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  font-weight: bold;
  touch-action: manipulation;
}

/* 完成プレビューの「写真：」の1行（状態ごとに左の線の色を変える） */
.auto-photo-status {
  margin: 6px 2px 0;
  padding: 6px 10px;
  border-left: 4px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  font-size: 0.9rem;
  line-height: 1.5;
}
.auto-photo-status[hidden] {
  display: none;
}
.auto-photo-status[data-kind="picked"] {
  border-left-color: #1b7f3b;
}
.auto-photo-status[data-kind="none"],
.auto-photo-status[data-kind="unlinked"] {
  border-left-color: #b35a00;
}

/* 大きさのつまみ：位置と長さはJSが選んだ物と重ならない端の区間に決める（2026-10-24から縦向きのみ） */
#size-rail {
  right: auto;
  transform: none;
  min-height: 0;
}

/* 文字の飾りの切り替え（1つのボタン）：いまの見た目 ▸ 次の見た目の見本 */
.look-cycle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 88px;
  min-height: 44px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-accent);
  touch-action: manipulation;
}
.look-cycle-btn[hidden] {
  display: none;
}
.look-cycle-wide {
  width: 100%;
  margin: 6px 0 10px;
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: bold;
}
.look-cycle-wide .look-label {
  margin-left: 8px;
  font-size: 0.92rem;
}
.look-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
}
.look-ico.look-next {
  width: 24px;
  height: 24px;
  font-size: 14px;
  opacity: 0.8;
}
.look-arrow {
  font-size: 0.8rem;
  color: var(--color-text-soft);
}
.look-ico.look-box {
  background: #e8e7e2;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1px #bdb8ad;
}
.look-ico.look-plain {
  background: transparent;
  color: #1a1a1a;
  text-shadow: 0 0 3px #ffffff, 0 0 3px #ffffff;
}
.look-ico.look-outline {
  background: transparent;
  color: #ffffff;
  text-shadow: 1px 0 0 #1a1a1a, -1px 0 0 #1a1a1a, 0 1px 0 #1a1a1a, 0 -1px 0 #1a1a1a, 1px 1px 0 #1a1a1a, -1px -1px 0 #1a1a1a, 1px -1px 0 #1a1a1a, -1px 1px 0 #1a1a1a;
}
.look-ico.look-invert {
  background: #1a1a1a;
  color: #e8e7e2;
}
/* 色の小さな帯 */
#text-color-btn .color-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: -3px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(0, 0, 0, 0.35);
}
.text-color-pop {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 4px 14px rgba(43, 36, 29, 0.28);
}
.text-color-pop[hidden] {
  display: none;
}
.text-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: bold;
}
.text-color-row > span {
  min-width: 4.5em;
}
.text-color-swatches {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pop-swatch {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.25);
}
.pop-swatch.active {
  box-shadow: 0 0 0 3px var(--color-blue);
}

/* ============================================================
   編集画面の上の帯（2026-10-23-10）：写真選びへ・戻す・やり直す・ⓘ・下書きの状態・書き出す
   ============================================================ */
.header-leave-btn {
  font-weight: bold;
}
#editor-header-text {
  flex: 0 0 auto;
}
#editor-header-text > summary {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.autosave-chip {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch-min);
  margin: 0;
  padding: 2px 4px;
  background: transparent;
  color: var(--color-text-soft);
  font-size: 0.82rem;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: none;
  box-shadow: none;
}
.autosave-chip[data-state="error"] {
  color: var(--color-accent-ink);
  font-weight: bold;
  text-decoration: underline;
}
.header-export-btn {
  gap: 4px;
  min-width: 96px;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.95rem;
}
@media (max-width: 460px) {
  #undo-btn .header-btn-label,
  #redo-btn .header-btn-label {
    display: none;
  }
  .header-leave-btn {
    padding-left: 6px;
    padding-right: 6px;
  }
  .header-export-btn {
    min-width: 88px;
  }
}

/* 書き出しの窓 */
.export-box {
  width: min(640px, 100%);
  max-height: calc(var(--vv-height) - 32px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.export-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.export-head h2 {
  margin: 0;
  font-size: 1.1rem;
}
.export-head .secondary-btn {
  width: auto;
  margin: 0;
}
#export-preview {
  display: block;
  max-width: 100%;
  max-height: calc(var(--vv-height) * 0.5);
  margin: 0 auto;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  background: #ffffff;
  cursor: zoom-in;
}
.export-fix-row {
  display: flex;
  gap: 8px;
}
.export-fix-row[hidden] {
  display: none;
}
.export-fix-row .secondary-btn {
  margin: 0;
}
#export-save-btn:disabled {
  opacity: 0.5;
}

/* 離れるときの窓 */
.leave-box {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.leave-box h2 {
  margin: 0;
}
.leave-fail-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leave-fail-actions[hidden] {
  display: none;
}
.leave-discard-btn {
  background: transparent;
  color: var(--color-accent-ink);
  text-decoration: underline;
  box-shadow: none;
  border: none;
}

/* 上の操作帯は「仕上がり」と「全体表示」だけ（拡大縮小は2本指。2026-10-23-10） */
#zoom-out-btn,
#zoom-in-btn,
#zoom-reset-btn {
  display: none;
}
/* 「画像を動かす」は「配置」パネルの中のボタンにした */
.sheet-panel #image-move-toggle {
  width: 100%;
  justify-content: center;
  margin: 8px 0;
  min-height: 48px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  border-radius: 12px;
}
.sheet-panel #image-move-toggle[aria-pressed="true"] {
  background: #1a5fb4;
  color: #ffffff;
  border-color: #1a5fb4;
}
/* 操作の案内：紙面の上部に重ねる短い通知（数秒で消える。場所を取らない） */
#step-edit {
  position: relative;
}
#edit-status {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: calc(var(--safe-top) + 112px);
  transform: translateX(-50%);
  max-width: min(92%, 560px);
  height: auto;
  margin: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(43, 36, 29, 0.88);
  color: #ffffff;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#edit-status:empty {
  display: none;
}
#edit-status.error {
  background: #7a2c1c;
  white-space: normal;
}

/* 完成プレビューから開いた設定：下（広い画面では右）に寄せ、完成プレビューを見ながら変えられるようにする */
.settings-overlay.settings-docked {
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.18);
  padding: 0;
}
.settings-overlay.settings-docked .settings-box {
  width: 100%;
  max-width: none;
  max-height: 52vh;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  columns: auto;
}
@media (min-width: 640px) and (orientation: landscape) {
  .settings-overlay.settings-docked {
    justify-content: flex-end;
    align-items: stretch;
  }
  .settings-overlay.settings-docked .settings-box {
    width: min(440px, 42vw);
    max-height: none;
    border-radius: 16px 0 0 16px;
  }
}
.settings-live-row {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--color-blue-bg);
  font-weight: bold;
}
.settings-live-row[hidden] {
  display: none;
}

#step-edit.layout-side #edit-status {
  top: calc(var(--safe-top) + 56px);
}

.export-source-row {
  display: flex;
  gap: 8px;
}
.export-source-row.needs select,
.export-source-row.needs input {
  outline: 2px solid var(--color-accent);
}
#export-preview {
  max-height: calc(var(--vv-height) * 0.42);
}

/* 選んだ物の操作の行：狭い画面でもはみ出さないよう詰め、入りきらないときは折り返す（2026-10-23-10） */
#action-buttons {
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 16px);
  gap: 6px;
}
#action-buttons .tool-btn {
  min-width: 0;
  min-height: 44px;
  padding: 6px 10px;
}
#action-buttons .look-cycle-btn {
  min-width: 76px;
}
#canvas-action-row {
  width: max-content;
  max-width: calc(100% - 12px);
}

/* ボタンの長い説明は出さず、アイコン・短いラベル・選択状態で伝える（2026-10-23-10） */
.tool-more-item small,
.place-action-text small {
  display: none;
}
.tool-more-item {
  min-height: 48px;
  justify-content: center;
}
@media (max-width: 460px) {
  #editor-header {
    gap: 4px;
  }
  .autosave-chip {
    flex: 0 0 auto;
    padding: 2px 0;
    font-size: 0.8rem;
  }
  #editor-header-text {
    margin-left: auto;
  }
}

/* 「仕上げ」の「書き出す」（上の帯の「書き出す」と同じ窓を開く） */
.finish-export-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  font-weight: bold;
}
.finish-export-btn svg {
  width: 22px;
  height: 22px;
}
.pre-edit-save-btn[hidden] {
  display: none;
}

/* ============================================================
   2026-10-24：完成プレビューの進み具合・記事を選ぶ・ボタンの記号
   ============================================================ */
/* 進み具合の3つの印（向き・文字・記事）。状態は記号（✓ ? ✕ … –）と言葉で示し、色は補助 */
.auto-steps {
  display: flex;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  justify-content: center;
  flex-wrap: wrap;
}
.auto-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: bold;
  line-height: 1.3;
}
.auto-step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-border);
  color: #fff;
  font-size: 0.8rem;
}
.auto-step[data-state="ok"] { border-color: #1b7f3b; }
.auto-step[data-state="ok"] .auto-step-ico { background: #1b7f3b; }
.auto-step[data-state="warn"] { border-color: #b35a00; }
.auto-step[data-state="warn"] .auto-step-ico { background: #b35a00; }
.auto-step[data-state="ng"] { border-color: #b3402a; }
.auto-step[data-state="ng"] .auto-step-ico { background: #b3402a; }
.auto-step[data-state="busy"] .auto-step-ico { background: #6b6358; }
.auto-step[data-state="skip"] { opacity: 0.6; }

/* 記事を選ぶ：番号・色・見出しの見本付きの大きなボタン（色だけで区別しない） */
.auto-choose-row {
  margin-top: 8px;
}
.auto-choose-row[hidden] {
  display: none;
}
.auto-choose-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 520px) {
  .auto-choose-list {
    grid-template-columns: 1fr 1fr;
  }
}
.auto-choose-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  margin: 0;
  padding: 8px 10px;
  min-height: 72px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 3px solid var(--choice-color, var(--color-accent));
  border-radius: 12px;
  text-align: left;
  touch-action: manipulation;
}
.auto-choose-btn .choice-num {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--choice-color, var(--color-accent));
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  box-shadow: 0 0 0 3px #fff inset;
}
.auto-choose-btn .choice-thumb {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  justify-self: start;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.auto-choose-btn .choice-cut {
  font-size: 0.85rem;
  font-weight: bold;
  color: #b3402a;
}
/* 選んでいない候補：細い点線。選んだ候補：太い実線と ✓・色の地（紙面の枠と同じ区別） */
.auto-choose-btn:not(.selected) {
  border-style: dashed;
  border-width: 2px;
}
.auto-choose-btn:not(.selected) .choice-num {
  background: #fff;
  color: var(--choice-color, var(--color-accent));
  box-shadow: 0 0 0 3px var(--choice-color, var(--color-accent)) inset;
}
.auto-choose-btn.selected {
  border-width: 4px;
  background: color-mix(in srgb, var(--choice-color, var(--color-accent)) 12%, var(--color-surface));
}
/* 確定のボタンは、候補が多くて一覧が長くても画面の下に見えたままにする */
.auto-choose-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  background: var(--color-bg);
}
.auto-choose-actions .auto-big-btn {
  flex: 1 1 auto;
  width: auto;
}
.auto-choose-actions .secondary-btn {
  flex: 0 0 auto;
  width: auto;
  min-height: 56px;
  margin: 0;
  padding: 0 18px;
}
.auto-choose-actions .secondary-btn[hidden] {
  display: none;
}
.auto-choose-actions .auto-big-btn:disabled {
  opacity: 0.55;
}

/* ボタンの記号（言葉の前に置く。読み上げは aria-label） */
.btn-ico {
  display: inline-block;
  margin-right: 4px;
  font-weight: 900;
}
.btn-svg {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  vertical-align: -5px;
}

/* 文字の飾りのボタン：見本のアイコン＋短い名前（いま）▸ 次の見本 */
.look-cycle-btn .look-label {
  margin: 0 2px;
  font-size: 0.86rem;
  font-weight: bold;
  white-space: nowrap;
}
.look-cycle-wide .look-label {
  margin: 0 4px;
  font-size: 0.95rem;
}

/* 大きさのつまみ（2026-10-24）：常に画面の左右どちらかの端に縦向き。横向き（rail-horizontal）はやめた */
#size-rail.rail-left {
  right: auto;
}

/* 完成プレビューの整理（2026-10-24） */
.auto-step {
  font-size: 0.78rem;
  padding: 2px 8px 2px 3px;
}
.auto-step-ico {
  width: 20px;
  height: 20px;
}
.auto-orient-row {
  padding: 4px 8px;
}
button.auto-orient-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 6px 4px;
  min-height: 40px;
  background: transparent;
  color: var(--color-text);
  border: none;
  font-weight: bold;
  touch-action: manipulation;
}
.auto-orient-row.attention button.auto-orient-label {
  color: var(--color-accent-ink, var(--color-text));
}
.auto-orient-choices[hidden] {
  display: none;
}
#auto-source-row.needs select,
#auto-source-row.needs input[type="date"] {
  border: 2px solid #b3402a;
}
/* 読込み画面の流れ（2026-10-24）：写真 → 記事 → 文字・スタンプ → 書き出す */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.flow-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  counter-increment: flow;
}
.flow-steps li::before {
  content: counter(flow);
  position: absolute;
  top: 0;
  left: 6px;
  font-size: 0.7rem;
  color: var(--color-text-soft);
}
.flow-steps li + li::after {
  content: "›";
  position: absolute;
  left: -6px;
  top: 12px;
  font-size: 1.1rem;
  color: var(--color-text-soft);
}
.flow-steps svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}

/* ============================================================
   スタンプ＝第一声（2026-11-05）
   ・見た目（ポップ／シール／吹き出し／明朝）と色を上で選び、下の見本を押すと紙面に置く
   ・見本は紙面に載ったときと同じ描き方（canvas）で、紙面の地の上に描く。感情別の分類・色分けはしない
   ・iPhone幅では3列、広い画面では4〜5列。見本は指で押しやすい高さ（64px以上）にする
   ============================================================ */
.voice-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.voice-look-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 3px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.voice-look-btn {
  min-height: 40px;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text);
  font-weight: bold;
  font-size: 0.86rem;
  touch-action: manipulation;
}
.voice-look-btn[aria-pressed="true"] {
  background: var(--color-text);
  color: #fff;
}
.voice-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.voice-color-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(43, 36, 29, 0.25);
  touch-action: manipulation;
}
.voice-color-btn[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-panel-bg), 0 0 0 4px var(--color-text);
}
.voice-target-note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
}
.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (min-width: 600px) {
  .voice-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
#step-edit.layout-side .voice-grid {
  grid-template-columns: repeat(3, 1fr);
}
.voice-tile {
  position: relative;
  height: 66px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: #ece8de;
  touch-action: manipulation;
}
.voice-tile canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.voice-tile:active {
  transform: scale(0.96);
}
.voice-tile:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 1px;
}

/* 置いた後の控えめな入口：コメントは必須ではない */
#action-buttons .voice-comment-btn.just-placed {
  background: #ffffff;
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* 図形（マーカー・囲みの中）：記号と短い名前 */
#stamp-palette .stamp-btn {
  flex-direction: column;
  gap: 2px;
  font-size: 0.75rem;
}

/* 飾りのボタン：第一声のスタンプを選んでいるときの見た目の見本 */
.look-ico.voice-look-ico {
  color: var(--voice-ink, #1a1a1a);
  background: transparent;
  box-shadow: none;
}
.look-ico.voice-look-pop {
  transform: rotate(-6deg);
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 3px 3px 0 rgba(0, 0, 0, 0.3);
}
.look-ico.voice-look-seal {
  background: #fff;
  border: 2px solid var(--voice-ink, #1a1a1a);
  border-radius: 9px;
  transform: rotate(4deg);
  font-family: "Hiragino Maru Gothic ProN", sans-serif;
}
.look-ico.voice-look-bubble {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 50%;
}
.look-ico.voice-look-brush {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  text-shadow: 0 0 4px #fff, 0 0 4px #fff;
}

/* ============================================================
   大きさのつまみを細く（2026-11-05）：「大」「小」の文字はやめ、上ほど太く下ほど細い縦長の逆三角形の目盛りで大小を伝える。
   触れられる幅（透明）は34px（SIZE_RAIL_W）にとどめ、紙面のタップを必要以上に奪わない。つまみの丸は小さく白く
   ============================================================ */
#size-rail {
  gap: 0;
}
#size-rail-track,
#step-edit #size-rail-track {
  width: 34px;
  isolation: isolate;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#size-rail-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 14px;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9));
  pointer-events: none;
}
/* 逆三角形のふち：暗い紙面・明るい紙面のどちらでも見えるよう、一回り大きい暗い三角形を後ろに置く */
#size-rail-track::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 1px;
  width: 18px;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: rgba(43, 36, 29, 0.55);
  z-index: -1;
  pointer-events: none;
}
#size-rail-fill {
  display: none;
}
#size-rail-thumb {
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-width: 2px;
  z-index: 1;
}

/* 色と飾りはアイコン1つ（2026-11-05）：飾りはいまの見た目の「あ」1つ、色はいまの文字色の丸（背景色の輪）だけ。
   押せる大きさ（48px角）と、開いている状態（.active）は残す */
.look-cycle-btn,
#action-buttons .look-cycle-btn {
  min-width: 48px;
  width: 48px;
  min-height: 48px;
  padding: 0;
  gap: 0;
}
.look-cycle-wide {
  width: 56px;
  min-width: 56px;
  margin: 6px 0 10px;
}
.look-cycle-btn .look-ico {
  width: 32px;
  height: 32px;
  font-size: 20px;
}
#text-color-btn {
  min-width: 48px;
  width: 48px;
  min-height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#text-color-btn[hidden] {
  display: none;
}
#text-color-btn .color-dot {
  width: 26px;
  height: 26px;
  margin: 0;
  vertical-align: middle;
  box-shadow: 0 0 0 3px var(--color-dot-ring, #ffffff), 0 0 0 4px rgba(0, 0, 0, 0.4);
}
#text-color-btn.active {
  box-shadow: 0 0 0 3px var(--color-accent) inset;
}
/* スタンプの見た目のボタン：名前の文字ではなく、その見た目で描いた「あ」1つ。選んだものは地の色と太い枠で示す */
.voice-look-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.voice-look-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
  color: var(--color-text);
  box-shadow: 0 0 0 3px var(--color-accent) inset;
}
.voice-look-btn .look-ico {
  width: 34px;
  height: 34px;
  font-size: 21px;
}

/* 書き出しの確認（2026-11-05）：完成画像を大きく。出典は入力済みなら1行の要約（押すと入力欄を開く） */
#export-preview {
  max-height: calc(var(--vv-height) * 0.66);
}
.export-source-summary {
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  min-height: 44px;
  text-align: left;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 0.95rem;
}
.export-source-summary::after {
  content: "✎";
  float: right;
  color: var(--color-text-soft);
}
.export-source-summary[hidden],
.export-source-row[hidden],
#export-check[hidden] {
  display: none;
}
.export-source-row .auto-source-field.needs label {
  color: var(--color-accent);
  font-weight: bold;
}
.export-source-row .auto-source-field.needs select,
.export-source-row .auto-source-field.needs input:not([hidden]) {
  outline: 3px solid var(--color-accent);
}
.export-source-row.needs select,
.export-source-row.needs input {
  outline: none;
}

/* 紙面の上の表示の操作（仕上がり・全体表示）は、パネルを開いたときの透明な幕（z-index 7）より上に置く（2026-11-05）。
   以前は幕の下にあり、「仕上がり」を押すと幕が受け取ってパネルを閉じていた */
#canvas-topbar {
  z-index: 8;
}

/* 文章のまとまりで選ぶ（2026-11-06） */
.block-open-btn {
  width: 100%;
  margin: 6px 0;
  font-weight: bold;
}
.block-open-btn[hidden],
.block-overlay[hidden],
.block-zoom-overlay[hidden] {
  display: none;
}
.block-box,
.block-zoom-box {
  width: min(760px, 100%);
  max-height: calc(var(--vv-height) - 16px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}
.block-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.block-head h2 {
  margin: 0;
  font-size: 1.05rem;
}
.block-head .secondary-btn {
  width: auto;
  margin: 0 0 0 auto;
  min-height: 44px;
}
.block-count {
  font-size: 0.85rem;
  color: var(--color-text-soft);
}
.block-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--color-border);
}
#block-canvas {
  display: block;
  touch-action: manipulation;
}
.block-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.block-actions .tool-btn {
  margin: 0;
  min-height: 48px;
}
.block-actions .tool-btn:disabled {
  opacity: 0.45;
}
#block-merge-btn.active {
  box-shadow: 0 0 0 3px var(--color-accent) inset;
  background: color-mix(in srgb, var(--color-accent) 15%, var(--color-surface));
}
.block-zoom-overlay {
  z-index: 210;
}
.block-zoom-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.block-zoom-img {
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.block-zoom-list.split .block-line-img {
  max-width: 100%;
  height: auto;
  align-self: flex-start;
  background: #fff;
}
.block-zoom-list.split.vertical {
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: flex-start;
}
.block-zoom-list.split.vertical .block-line-img {
  max-height: 60vh;
  width: auto;
}
.block-cut-btn {
  margin: 0;
  min-height: 40px;
  min-width: 44px;
  padding: 0 10px;
  border: 1px dashed var(--color-accent);
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: bold;
}
.block-split-all {
  width: auto;
  margin: 8px 0 0;
}
.block-head h2 {
  white-space: nowrap;
}
.block-count {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block-head .secondary-btn {
  white-space: nowrap;
  padding: 0 14px;
}
.block-cut-btn {
  min-height: 32px;
}

/* 体験版：画面内の架空紙面 */
.fake-page-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 4px 0 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.fake-page-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 6px; border: 1px solid rgba(43, 36, 29, 0.2); border-radius: 10px; background: #fff; font: inherit; font-size: 12px; color: inherit; scroll-snap-align: start; cursor: pointer; }
.fake-page-btn img { width: 70px; height: 90px; object-fit: cover; border-radius: 4px; background: #eee; }

/* 体験版：狭い画面の短い「仕上げ」（隠し方とぼかしの強さのつまみだけ。紙面を大きく出す） */
.finish-compact-note { display: none; }
#bottom-sheet.finish-compact [data-panel="finish"] > .hint,
#bottom-sheet.finish-compact [data-panel="finish"] > .finish-actions,
#bottom-sheet.finish-compact [data-panel="finish"] > .status,
#bottom-sheet.finish-compact [data-panel="finish"] > .legal-hint,
#bottom-sheet.finish-compact [data-panel="finish"] > .fine-adjust { display: none; }
#bottom-sheet.finish-compact .finish-compact-note { display: block; margin: 4px 0 0; font-size: 11px; line-height: 1.4; color: #6b6158; }
#bottom-sheet.finish-compact [data-panel="finish"] .mode-buttons { margin: 0; }
#bottom-sheet.finish-compact [data-panel="finish"] .mode-btn { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
#bottom-sheet.finish-compact [data-panel="finish"] .mask-param-row { margin-top: 6px; }
#bottom-sheet.finish-compact [data-panel="finish"] .mask-param-row label { font-size: 13px; }
#canvas-viewport.finish-compact #canvas-topbar { display: none; }
#bottom-sheet.finish-compact [data-panel="finish"] .mask-param-row { display: flex; align-items: center; gap: 8px; }
#bottom-sheet.finish-compact [data-panel="finish"] .mask-param-row[hidden] { display: none; }
#bottom-sheet.finish-compact [data-panel="finish"] .mask-param-row label { flex: none; white-space: nowrap; }
#bottom-sheet.finish-compact [data-panel="finish"] .mask-param-row input[type="range"] { flex: 1; min-width: 0; margin: 0; }
/* 体験版：幅390px未満では上の帯が画面からはみ出し「書き出す」が欠けたため、説明の ⓘ を省く（同じ説明は最初の画面にある） */
@media (max-width: 389px) {
  #editor-header-text { display: none; }
}