/* [hidden] 属性を持つ要素は常に非表示にする。
   CSS の display:flex 等は [hidden] の display:none より優先されるため !important で上書き。 */
[hidden] { display: none !important; }

:root {
  color-scheme: light;
  --paper: #fbf6ee;
  --ink: #3a3226;
  --accent: #d98a4a;
  --line: #e5dbc8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

.topbar {
  padding: 24px 20px 8px;
  text-align: center;
}

.topbar h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
}

.badge {
  font-size: 0.7rem;
  vertical-align: middle;
  background: var(--accent);
  color: white;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge-optional {
  font-size: 0.7rem;
  vertical-align: middle;
  background: #e8e4df;
  color: #7a6f5c;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 4px;
}

.lead {
  margin: 0;
  color: #7a6f5c;
  font-size: 0.95rem;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
}

.card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
/* display:flex が [hidden] 属性の display:none より優先されるため、明示的に上書きする */
.field[hidden] { display: none; }
.fact-body[hidden],
.fact-confirm-area[hidden],
.fact-confirm-other[hidden],
.fact-question-area[hidden],
.interview-step-chat[hidden],
.interview-step-input[hidden] { display: none; }

.field .field-hint {
  font-size: 0.8rem;
  color: #7a6f5c;
}

.field input[type="text"],
.field select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.95rem;
  background: white;
  color: var(--ink);
}

/* タップUI(ボタン/カード形式)の選択項目。横並び・折り返しで配置し、
   指タップを想定してタップ領域を44px四方以上確保する。 */
.tap-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tap-option {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
  text-align: center;
  /* 2026-09-24 改修:スマホ実機で「文章量」「豆知識の頻度」等のラベルが崩れる不具合の修正。
     .tap-group は display:flex のため、各ボタンは既定で flex-shrink:1(縮小可)になり、
     幅が足りないと min-width(44px)まで縮もうとする。日本語は欧文と違いスペース区切りが
     無いため、ボタンの表示幅が文字の幅より狭くなると、ラベルがボタン内で1〜2文字ごとに
     改行され、行の高さがボタンごとにバラバラになる形で崩れて見えていた。
     flex-shrink:0 にして、ボタンをその内容(短いラベル)の幅より縮ませないようにする
     (幅が足りない分はボタンの縮小ではなく flex-wrap による次の行への折り返しに任せる)。
     ※ white-space:nowrap は付けない:「利用目的」のような長文ラベルは元々ボタン内で
       複数行に折り返る前提のため、nowrap にすると今度はボタンが画面幅を超えて
       はみ出してしまう(実機テストで確認済み)。短いラベルは flex-shrink:0 だけで
       十分改行されなくなる(自然な文字幅より縮まなくなるため)。 */
  flex-shrink: 0;
  max-width: 100%;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tap-option:hover {
  border-color: var(--accent);
}

.tap-option.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  font-weight: bold;
}

/* 画風のように、ラベルだけでなく理由文(補足説明)を持つカード形式のタップ選択肢。 */
.tap-option--card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  max-width: 260px;
  padding: 10px 14px;
  text-align: left;
}

/* 画風カードのサムネイル画像(任意)。後日の画像差し替えを見越して、
   読み込み中・失敗時にもレイアウトが崩れないよう固定の枠を確保しておく。 */
.tap-option-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
}

.tap-option-label {
  font-weight: bold;
  font-size: 0.95rem;
}

.tap-option-desc {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.8;
  font-weight: normal;
  /* 親 .tap-option の white-space:nowrap を、理由文(複数行の文章)だけは解除する。 */
  white-space: normal;
}

.tap-option--card.is-selected .tap-option-desc {
  color: white;
  opacity: 0.95;
}

#upload-btn,
#generate-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
}

#upload-btn:disabled,
#generate-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.status {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #7a6f5c;
}

.hint {
  margin-top: 0;
  font-size: 0.85rem;
  color: #7a6f5c;
}

.memo-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.memo-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
}

.memo-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
}

.memo-field {
  margin-bottom: 0;
}

.memo-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}

.video-capture {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}

.video-capture h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.video-capture .hint {
  margin-bottom: 10px;
}

#video-preview {
  width: 100%;
  max-height: 360px;
  border-radius: 10px;
  background: black;
  display: block;
  margin-top: 10px;
}

.video-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

#capture-frame-btn {
  background: var(--ink);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
}

#capture-frame-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.capture-thumb-wrap {
  position: relative;
  width: 96px;
  height: 96px;
}

.capture-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: white;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}

.pages {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.page-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

@media (min-width: 640px) {
  .page-card {
    grid-template-columns: 260px 1fr;
    align-items: center;
  }
}

.page-illustration {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f1ead9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a99a7d;
  font-size: 0.85rem;
  text-align: center;
}

.page-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-number {
  font-size: 0.8rem;
  color: #a99a7d;
}

.page-text-input {
  font-size: 1.15rem;
  line-height: 1.8;
  min-height: 4.5em;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  color: var(--ink);
  background: white;
  resize: vertical;
}

.page-text-input:disabled {
  background: #f6f0e4;
  color: #a99a7d;
}

.trivia-badge {
  display: inline-block;
  font-size: 0.78rem;
  color: #5c7a52;
  background: #eef3e6;
  border: 1px solid #d3e0c4;
  border-radius: 8px;
  padding: 4px 8px;
  margin-bottom: 6px;
}

.page-error {
  color: #c0503a;
  font-size: 0.85rem;
}

/* 作り直し中のボタン:押せないことと、処理中であることが一目で分かるようにする */
.regen-btn.is-busy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 1;
  cursor: progress;
}

.regen-btn.is-busy::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: regen-spin 0.8s linear infinite;
}

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

.page-note {
  color: #8a5a12;
  background: #fdf3dc;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.page-confirmation-notice {
  color: #7a5a00;
  background: #fff8e1;
  border: 1px solid #e8c84a;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.85rem;
}

.preview-confirmation-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 248, 225, 0.92);
  color: #7a5a00;
  border: 1px solid #e8c84a;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  white-space: nowrap;
  pointer-events: none;
}

.page-layout-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.page-layout-field select {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-actions button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 32px;
  font-size: 0.8rem;
  cursor: pointer;
  color: var(--ink);
}

.page-actions button:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- 生成サマリー・再開ボタン(本番運用安定化・②) --- */

.generation-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f6f0e4;
  font-size: 0.9rem;
}

/* --- 編集/プレビュー タブ --- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.tab-btn {
  background: none;
  border: none;
  padding: 8px 6px;
  margin-bottom: -1px;
  font-size: 0.95rem;
  color: #a99a7d;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab-btn.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: bold;
}

/* --- プレビュー(閲覧専用) --- */

.preview-viewer {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}

.preview-page {
  position: relative;
  container-type: inline-size; /* 本文の文字サイズを、印刷と同じくページ幅に対する比で決めるため */
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f1ead9;
  box-shadow: 0 2px 12px rgba(58, 50, 38, 0.12);
}

.preview-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 印刷と同じく、全ページ同じ大きさで表示する(以前の importance=high だけ大きく見せる演出は、
   印刷結果と違って見えるため廃止)。絵の収め方は印刷のトリミング方式に合わせる:
   contain_with_fill = 絵全体を収め、余りは紙色(印刷と同じ #fbf6ee)。 */
.preview-page img.is-contain {
  object-fit: contain;
  background: #fbf6ee;
}

/* 同じ見開きの左右が並ぶときは、隙間をなくして1枚の絵として見せる */
.preview-viewer.is-spread-view {
  gap: 0;
}

.preview-viewer.is-spread-view .preview-page:first-child {
  border-radius: 10px 0 0 10px;
}

.preview-viewer.is-spread-view .preview-page:last-child {
  border-radius: 0 10px 10px 0;
}

.preview-page-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px 14px;
  background: linear-gradient(to top, rgba(251, 246, 238, 0.97), rgba(251, 246, 238, 0.8) 65%, transparent);
  font-size: 1rem;
  line-height: 1.7;
}

/* 印刷と同じ行計画で表示するときは、印刷と同じ位置で改行し、画面側では折り返さない(行間も印刷と同じ 1.65) */
.preview-page-caption.is-planned {
  white-space: pre;
  line-height: 1.65;
  overflow: hidden;
}

/* 行計画がまだ無い(保存中など)ときは、改行だけを強制改行として表示する */
.preview-page-caption:not(.is-planned) {
  white-space: pre-line;
}

/* 印刷では最大行数に収まらず打ち切られる */
.preview-page-caption.is-truncated::after {
  content: "\A…(印刷では、ここまでしか入りません)";
  white-space: pre;
  color: #c0503a;
}

/* 本文の位置(text_layout_mode)。印刷用の完成ページと同じ位置関係で表示する */
.preview-page-caption.is-layout-top {
  top: 0;
  bottom: auto;
  padding: 14px 16px 18px;
  background: linear-gradient(to bottom, rgba(251, 246, 238, 0.97), rgba(251, 246, 238, 0.8) 65%, transparent);
}

.preview-page-caption.is-layout-upper_left,
.preview-page-caption.is-layout-upper_right,
.preview-page-caption.is-layout-lower_left,
.preview-page-caption.is-layout-lower_right {
  left: auto;
  right: auto;
  bottom: auto;
  width: 45%;
  margin: 6%;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(251, 246, 238, 0.8);
  font-size: 0.85rem;
  line-height: 1.6;
}

.preview-page-caption.is-layout-upper_left { top: 0; left: 0; }
.preview-page-caption.is-layout-upper_right { top: 0; right: 0; }
.preview-page-caption.is-layout-lower_left { bottom: 0; left: 0; }
.preview-page-caption.is-layout-lower_right { bottom: 0; right: 0; }

/* 自由配置(本文自動配置 Ver.1.3):位置・幅は印刷と同じ値(style で指定)。箱の内側余白は印刷と同じ比(50px / 1819px) */
.preview-page-caption.is-freeform {
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  padding: 2.75cqw;
  border-radius: 8px;
  background: rgba(251, 246, 238, 0.8);
}

.preview-page-placeholder {
  flex: 1 1 0;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  visibility: hidden;
}

.preview-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.chip-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink);
}

.chip-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.preview-page-label {
  font-size: 0.9rem;
  color: #7a6f5c;
  min-width: 70px;
  text-align: center;
}

/* --- 一言メモ行の♡トグル --- */

.memo-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.heart-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.95rem;
  cursor: pointer;
  color: #c7bda8;
  line-height: 1.6;
  white-space: nowrap;
}

.heart-btn.is-active {
  color: #d9527a;
  border-color: #f0c3d2;
  background: #fdf0f4;
}

/* --- 構成案(実験的) --- */

.plan-box {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  margin: 4px 0 16px;
}

.plan-box h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

#plan-btn {
  background: var(--ink);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
}

#plan-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.plan-warning {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #f0c3a0;
  background: #fdf3e8;
  border-radius: 10px;
  font-size: 0.9rem;
}

.plan-warning p {
  margin: 0 0 10px;
  color: #8a5a2a;
}

.plan-warning .plan-warning-actions {
  display: flex;
  gap: 10px;
}

.plan-warning-actions button {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
}

.plan-warning-actions button.primary {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

.plan-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.85rem;
}

.plan-table th,
.plan-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.plan-table th {
  color: #7a6f5c;
  font-weight: normal;
}

.plan-importance-high {
  color: #b5563a;
  font-weight: bold;
}

.plan-importance-medium {
  color: #8a7a4a;
}

.plan-importance-low {
  color: #a99a7d;
}

.plan-json-toggle {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #7a6f5c;
  cursor: pointer;
}

.plan-json pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 0.75rem;
  background: #f6f0e4;
  border-radius: 8px;
  padding: 10px;
  max-height: 400px;
  overflow: auto;
}

/* --- 過去のアルバム一覧(Phase B・⑦) --- */

.album-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.album-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.album-list-item:hover {
  border-color: var(--accent);
}

.album-list-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--paper);
  border: 1px solid var(--line);
}

.album-list-thumb--empty {
  display: block;
}

.album-list-info {
  min-width: 0; /* flex子要素のテキスト省略(ellipsis)を効かせるために必要 */
  flex: 1;
}

.album-list-title {
  font-weight: bold;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-list-meta {
  font-size: 0.8rem;
  color: #7a6f5c;
  margin-top: 2px;
}

.album-list-status {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 999px;
}

.album-list-status--not_started {
  background: #eeeeee;
  color: #7a7a7a;
}

.album-list-status--done {
  background: #e3f1df;
  color: #3f7a35;
}

.album-list-status--generating {
  background: #eef1e0;
  color: #7a8a35;
}

.album-list-status--partial_error,
.album-list-status--error {
  background: #f6e2df;
  color: #a4442f;
}

@media (max-width: 480px) {
  .album-list-thumb {
    width: 48px;
    height: 48px;
  }
}

/* --- 表紙タイトル選択・編集+表紙プレビュー(表紙実装STEP4。印刷データではなくDOM overlay) --- */
.cover-panel {
  margin: 8px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.cover-panel h3 {
  margin: 0 0 12px;
}

.cover-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.cover-preview {
  position: relative;
  flex: 0 1 360px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f1ead9;
  box-shadow: 0 2px 12px rgba(58, 50, 38, 0.12);
  container-type: inline-size;
}

.cover-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-preview-no-image {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a8f7a;
  font-size: 0.9rem;
}

.cover-preview-title {
  position: absolute;
  left: 0;
  right: 0;
  padding: 5cqw 7cqw 4.5cqw;
  text-align: center;
  font-weight: 700;
  font-size: 8cqw;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* 最大2行。長さに応じて .is-short/.is-long/.is-xlong で文字サイズを変え、それでも溢れる場合だけ省略する。
   clampは内側要素にかける(外側のpadding領域に3行目がはみ出して見えないように)。
   タイトルは分かち書き(スペース区切り)が多いため語の途中では折り返さず、収まらない語だけ任意位置で折る。 */
.cover-preview-title-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.cover-preview.is-bottom .cover-preview-title {
  bottom: 0;
  background: linear-gradient(to top, rgba(251, 246, 238, 0.92), rgba(251, 246, 238, 0.75) 60%, transparent);
}

.cover-preview.is-top .cover-preview-title {
  top: 0;
  padding: 4.5cqw 7cqw 5cqw;
  background: linear-gradient(to bottom, rgba(251, 246, 238, 0.92), rgba(251, 246, 238, 0.75) 60%, transparent);
}

.cover-preview-title.is-short {
  font-size: 10cqw;
}

.cover-preview-title.is-long {
  font-size: 6.5cqw;
}

.cover-preview-title.is-xlong {
  font-size: 5.5cqw;
}

.cover-title-form {
  flex: 1 1 260px;
  min-width: 0;
}

.cover-form-label {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.cover-title-candidates {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.cover-title-candidate {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: left;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}

.cover-title-candidate.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.cover-title-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: -4px 0 12px;
  font-size: 0.85rem;
}

.cover-title-count {
  color: #7a6f5c;
}

.cover-title-count.is-over {
  color: var(--accent);
}

/* --- 入稿前チェック(Submission STEP 1) --- */
.preflight-panel {
  margin: 8px 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.preflight-panel h3 {
  margin: 0 0 8px;
}

.preflight-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  font-size: 0.9rem;
}

.preflight-controls select {
  margin-left: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
}

.preflight-overall {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.preflight-overall.is-pass {
  border-color: #6aa36f;
}

.preflight-overall.is-warn {
  border-color: var(--accent);
}

.preflight-overall.is-fail {
  border-color: #c0392b;
  background: #fdf1ef;
}

.preflight-time {
  color: #7a6f5c;
  font-size: 0.85rem;
}

.preflight-category h4 {
  margin: 14px 0 4px;
  font-size: 0.95rem;
}

.preflight-category ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.preflight-check summary {
  cursor: pointer;
  padding: 3px 0;
  font-size: 0.9rem;
}

.preflight-check p {
  margin: 2px 0 6px 1.6em;
  font-size: 0.85rem;
  color: #5a5040;
  overflow-wrap: anywhere;
}

.preflight-check pre {
  margin: 0 0 6px 1.6em;
  font-size: 0.75rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.preflight-check.is-fail summary {
  color: #a93226;
  font-weight: 700;
}

.preflight-check.is-na summary {
  color: #9a8f7a;
}

.preflight-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: #7a6f5c;
}

/* --- 発注条件(Submission STEP 3) --- */
.order-config {
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 0.9rem;
}

.order-config p {
  margin: 0 0 6px;
}

.order-config-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 10px;
}

.order-config-form select,
.order-config-form input {
  margin-left: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
}

.order-config-tagline input {
  width: 18em;
  max-width: 60vw;
}

.order-config-warning {
  flex-basis: 100%;
  color: #a05a1f;
  font-size: 0.85rem;
}

/* --- 印刷準備(Ver.1) --- */
.print-view { margin-top: 12px; }
.print-intro { margin: 4px 0 12px; }
.print-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.print-step { border: 1px solid #e4ddd3; border-radius: 10px; padding: 12px 16px; background: #fff; }
.print-step h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.05rem; }
.print-step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #b4531d; color: #fff; font-size: 0.9rem; }
.print-step-state { margin-left: auto; font-size: 0.8rem; font-weight: normal; padding: 1px 10px; border-radius: 10px; background: #f0ebe3; color: #6b6258; }
.print-step-state:empty { display: none; }
.print-step-state.is-done { background: #e3f2e7; color: #15803d; }
.print-step-state.is-warn { background: #fdf2dc; color: #a16207; }
.print-step-state.is-fail { background: #fde4e7; color: #be123c; }
.print-spec-summary { font-size: 1.05rem; font-weight: bold; margin: 0 0 6px; }
.print-order-config { border: 0; padding: 0; margin: 0; background: none; }
.print-check-headline { font-weight: bold; font-size: 1.05rem; margin: 4px 0; }
.print-check-headline.is-ok { color: #15803d; }
.print-check-headline.is-warn { color: #a16207; }
.print-check-headline.is-fail, .print-check-headline.is-stale { color: #be123c; }
.print-check-groups { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.print-check-groups .is-ok { color: #15803d; }
.print-check-groups .is-warn { color: #a16207; }
.print-check-groups .is-fail { color: #be123c; font-weight: bold; }
.print-check-problems { padding-left: 18px; margin: 6px 0; }
.print-check-problems li { margin: 4px 0; }
.print-check-problems .is-fail span { color: #be123c; }
.print-stale { color: #be123c; font-weight: bold; }
.print-preview-cover img { width: 100%; max-width: 900px; display: block; border: 1px solid #e4ddd3; border-radius: 6px; }
.print-preview-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.print-preview-pages img { width: 100%; display: block; border: 1px solid #e4ddd3; border-radius: 4px; }
.print-preview-cover figure, .print-preview-pages figure { margin: 0; }
.print-preview-cover figcaption, .print-preview-pages figcaption { font-size: 0.8rem; color: #6b6258; text-align: center; }
.print-confirm { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: bold; }
.print-important { border: 2px solid #be123c; background: #fff5f6; border-radius: 8px; padding: 8px 12px; margin: 4px 0 10px; }
.print-download-spec { font-weight: bold; }
.print-guide h4 { margin: 12px 0 4px; font-size: 0.95rem; }
.print-guide ol, .print-guide ul { margin: 4px 0; padding-left: 20px; }
.print-dev { margin-top: 16px; font-size: 0.85rem; color: #6b6258; }
.print-dev pre { white-space: pre-wrap; word-break: break-all; background: #f5f2ec; padding: 8px; border-radius: 6px; max-height: 320px; overflow: auto; }
button.is-loading { opacity: 0.7; cursor: progress; }

/* ===== Phase 3:一般の利用者向けの画面の流れ ===== */

/* 開発・検証用(?dev=1 のときだけ表示。表示を切り替えるだけ) */
body:not(.dev-mode) .dev-only { display: none !important; }

.topbar { position: relative; }
.brand-btn { background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.topbar-right {
  position: absolute; top: 12px; right: 16px;
  display: flex; align-items: center; gap: 10px;
}
.topbar-logout {
  background: none; border: none; color: #7a6f5c; font-size: 0.85rem; text-decoration: underline; cursor: pointer;
}
.help-manual-btn {
  background: var(--bg2, #f4f0ea); border: 1px solid var(--line, #e0dbd4);
  border-radius: 999px; padding: 4px 12px;
  font-size: 0.82rem; color: var(--fg, #333); cursor: pointer;
}
.help-manual-btn:hover { background: var(--accent, #7a8fa6); color: #fff; border-color: var(--accent, #7a8fa6); }

.auth-banner {
  max-width: 900px; margin: 8px auto 0; padding: 12px 16px;
  background: #fff3e6; border: 1px solid var(--accent); border-radius: 12px; font-size: 0.95rem;
}
.auth-banner a { margin-left: 8px; font-weight: bold; color: #a3561d; }

.primary-btn {
  background: var(--accent); color: white; border: none; border-radius: 999px;
  padding: 12px 24px; font-size: 1rem; font-weight: bold; cursor: pointer;
}
.primary-btn:disabled { opacity: 0.5; cursor: default; }

.home-card { text-align: center; padding: 28px 20px; }
#new-book-btn { font-size: 1.15rem; padding: 16px 36px; }
.home-hint { margin-top: 12px; }

/* STEP の表示 */
.step-indicator {
  list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 16px; counter-reset: step;
}
.step-indicator li {
  flex: 1; text-align: center; font-size: 0.85rem; color: #9a8f7a; padding: 6px 2px;
  border-bottom: 3px solid var(--line); counter-increment: step;
}
.step-indicator li::before { content: counter(step) ". "; }
.step-indicator li.is-done { color: var(--ink); border-color: #e8c29f; }
.step-indicator li.is-current { color: var(--ink); font-weight: bold; border-color: var(--accent); }

.step-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px;
}

/* 写真を選ぶ */
.photo-selected-count { margin: 12px 0 8px; font-weight: bold; }
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px;
}
.photo-card { display: flex; flex-direction: column; gap: 6px; cursor: grab; }
.photo-card-ghost { opacity: 0.4; background: var(--bg-alt, #f6f0e4); border-radius: 10px; }
.photo-card-chosen { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); }
.photo-card-thumb { position: relative; }
.photo-card-thumb img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block;
  -webkit-touch-callout: none; -webkit-user-drag: none;
}
.photo-remove-btn, .photo-heart-btn {
  position: absolute; top: 6px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, 0.92); cursor: pointer; font-size: 1rem; line-height: 32px; padding: 0;
}
.photo-remove-btn { right: 6px; }
.photo-heart-btn { left: 6px; color: #c0504d; }
.photo-heart-btn.is-on { background: #fde8e7; }
.photo-reorder-row { display: flex; align-items: center; gap: 4px; justify-content: center; }
.photo-order-btn { padding: 2px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); cursor: pointer; font-size: 0.82rem; line-height: 1.6; }
.photo-order-btn:disabled { opacity: 0.25; cursor: default; }
.photo-order-num { font-size: 0.72rem; color: var(--sub); flex: 1; text-align: center; white-space: nowrap; }
.photo-memo-input {
  width: 100%; box-sizing: border-box; padding: 8px; font-size: 16px; line-height: 1.5; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; resize: vertical; min-height: 4.8em;
}
.video-capture { margin-top: 20px; border-top: 1px dashed var(--line); padding-top: 12px; }
.video-capture > summary, .advanced-settings > summary { cursor: pointer; font-weight: bold; padding: 6px 0; }

/* 絵本について */
.advanced-settings { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.advanced-settings[open] { padding-bottom: 14px; }

/* 確認 */
.confirm-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.confirm-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.confirm-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.confirm-summary dt { color: #7a6f5c; }
.confirm-summary dd { margin: 0; font-weight: bold; }
.confirm-warning { color: #a3561d; }

/* つくっている間 */
.generating-progress { font-size: 1.1rem; font-weight: bold; margin: 16px 0 8px; }
.generating-failed { margin-top: 12px; }

/* できあがった絵本 */
.book-status { font-size: 1rem; font-weight: bold; color: var(--ink); }
.book-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* ページの並べ替えボタン */
.page-order-controls { display: flex; gap: 8px; padding: 6px 0 4px; border-top: 1px solid #e8e0d4; margin-top: 4px; }
.page-move-btn { flex: 1; padding: 8px 4px; font-size: 0.95rem; background: #f5f0e8; border: 1px solid #ccc; border-radius: 6px; cursor: pointer; color: #4a3f2f; }
.page-move-btn:disabled { opacity: 0.3; cursor: default; }
.page-move-btn:not(:disabled):hover { background: #ede5d8; }
#pages-reorder-status { color: #b3392f; font-weight: bold; margin: 0 0 8px; }

/* ページごとの操作(たたむ) */
.page-menu { margin-top: 8px; }
.page-menu > summary { cursor: pointer; font-size: 0.9rem; color: #7a6f5c; padding: 4px 0; }
.page-menu-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.page-save-status { font-size: 0.85rem; min-height: 1.2em; margin-top: 4px; color: #7a6f5c; }
.page-save-status.is-saved { color: #3d7a3d; }
.page-save-status.is-failed, .page-save-status.is-unauthorized { color: #b3392f; font-weight: bold; }

@media (max-width: 480px) {
  .photo-grid { grid-template-columns: 1fr; gap: 10px; }
  .photo-card > .page-error { margin: 0; }
  .step-indicator li { font-size: 0.75rem; }
  .topbar-right { position: static; margin-top: 6px; justify-content: flex-end; }
  .topbar-logout { position: static; }
  #new-book-btn { width: 100%; }
}

/* --- Phase 4.5 追加(スマホの実機テストの修正) --- */
.photo-pick-hint { margin: 8px 0 0; }
/* 2026-10-05 追加:写真をまとめて選ぶための案内・選んだ直後の「N枚追加しました」 */
.photo-pick-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fdf1e3; color: #6b4a22; font-size: 0.85rem; line-height: 1.6; }
.photo-added-msg { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: #e9f4e6; color: #2f6a2f; font-weight: bold; }
.photo-over-page-warning { margin: 10px 0 0; padding: 10px 14px; border-radius: 8px; background: #fff7e0; color: #7a5400; border-left: 4px solid #f0b429; font-size: 0.9rem; line-height: 1.65; }
.photo-selected-count.has-added { margin-top: 6px; }
.photo-card.is-checking .photo-card-thumb img { opacity: 0.6; }
/* 2026-10-05 追加:下書き保存(「次へ」より控えめ。ただし見つけやすいよう、横幅いっぱい・押しやすい高さ) */
.draft-row { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; }
.draft-btn {
  width: 100%; min-height: 44px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--accent); background: #fff; color: #a3561d; font-size: 1rem; font-weight: bold;
}
.draft-btn:disabled { opacity: 0.6; cursor: default; }
.draft-status { margin: 0; font-size: 0.85rem; color: #7a6f5c; text-align: center; }
.draft-status.is-saved { color: #2f6a2f; font-weight: bold; }
.draft-status.is-failed { color: #b3392f; font-weight: bold; text-align: left; }
.draft-row + .step-nav { margin-top: 14px; }
.capture-retry-btn { margin-top: 6px; }
.tap-option-thumb.is-failed { visibility: hidden; }
/* 作っている途中でやめるときの確認 */
.confirm-dialog { max-width: min(420px, calc(100vw - 32px)); border: none; border-radius: 14px; padding: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.confirm-dialog p { margin: 0 0 16px; line-height: 1.7; font-weight: bold; }
.confirm-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.confirm-dialog-actions button { min-height: 44px; }
.danger-btn { color: #b3392f; border-color: #e3b5b0; }
/* 画風・かくれキャラの見本:スマホでは「見本の画像(左)+名前・説明(右)」の横並びにして、縦に長くなりすぎないようにする */
@media (max-width: 480px) {
  #album-art-style .tap-option--card,
  #album-hidden-character-category .tap-option--card {
    display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 2px;
    max-width: none; width: 100%; align-items: start;
  }
  #album-art-style .tap-option-thumb,
  #album-hidden-character-category .tap-option-thumb { grid-row: 1 / span 2; width: 88px; }
}

/* --- 作れなかったページの作り直し(Phase 4.6・課題⑨) --- */
#resume-generation-btn.is-busy { display: inline-flex; align-items: center; gap: 6px; opacity: 1; cursor: progress; }
#resume-generation-btn.is-busy::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: regen-spin 0.8s linear infinite;
}
.page-queued-note { color: #7a6f5c; }

/* --- 登場人物登録ステップ --- */
#step-characters { padding: 0 0 80px; }
.char-section { margin-bottom: 24px; }
.char-section-title { font-size: 1rem; font-weight: 600; color: var(--fg); margin: 0 0 10px; }
.char-list { display: flex; flex-direction: column; gap: 10px; }
.char-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg2); border-radius: 12px; padding: 12px 14px;
}
.char-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.char-name-input {
  flex: 1; min-width: 120px;
  font: inherit; font-size: 0.95rem;
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg);
}
.char-name-input:focus { outline: 2px solid var(--accent); }
.char-birth-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.85rem; color: var(--fg-sub, #888); }
.char-year-select, .char-month-select {
  font: inherit; font-size: 0.85rem;
  padding: 4px 6px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg);
}
.char-delete-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  border: none; background: transparent; cursor: pointer;
  font-size: 1.1rem; color: var(--fg-sub, #888);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.char-delete-btn:hover { background: #f0e0e0; color: #c00; }
.char-add-btn {
  display: flex; align-items: center; gap: 6px;
  font: inherit; font-size: 0.9rem; color: var(--accent);
  background: transparent; border: 1.5px dashed var(--accent);
  border-radius: 8px; padding: 8px 14px; cursor: pointer; width: 100%;
  justify-content: center; margin-top: 4px;
}
.char-add-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.char-role-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.char-role-btn {
  font: inherit; font-size: 0.82rem;
  padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--bg); cursor: pointer; color: var(--fg);
}
.char-role-btn.is-selected {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.char-family-row { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.char-writer-list { display: flex; flex-direction: column; gap: 6px; }
.char-writer-btn {
  font: inherit; font-size: 0.92rem;
  padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); cursor: pointer; text-align: left;
  color: var(--fg);
}
.char-writer-btn.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }

/* --- FACTインタビューUI --- */
#fact-interview-wrap { padding: 0 0 80px; }
.fact-loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0; }
.fact-loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: regen-spin 0.8s linear infinite;
}
.fact-loading-msg { font-size: 0.95rem; color: var(--fg-sub, #888); }
.fact-intro { padding: 12px 0; }
.fact-intro p { font-size: 0.95rem; line-height: 1.65; color: var(--fg); margin: 0 0 10px; }
.fact-body { display: flex; flex-direction: column; gap: 20px; }
.fact-photo-display { position: relative; border-radius: 12px; overflow: hidden; }
.fact-photo-img { width: 100%; max-height: 240px; object-fit: cover; display: block; border-radius: 12px; }
.fact-photo-comment { font-size: 0.85rem; color: var(--fg-sub, #888); margin: 6px 0 0; line-height: 1.5; }
.fact-confirm-area { display: flex; flex-direction: column; gap: 10px; }
.fact-confirm-question { font-size: 0.9rem; font-weight: 600; color: var(--fg); }
.fact-confirm-buttons { display: flex; flex-direction: column; gap: 6px; }
.fact-confirm-choice-btn {
  font: inherit; font-size: 0.9rem;
  padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); cursor: pointer; text-align: left;
  color: var(--fg); transition: border-color 0.15s;
}
.fact-confirm-choice-btn:hover { border-color: var(--accent); }
/* 人物確認:スマホで押しやすい高さ(48px 以上)にする */
.fact-confirm-choice-btn { min-height: 48px; font-size: 1rem; }
.fact-confirm-choice-btn.is-unknown { color: #7a6f60; }
.fact-confirm-hint { margin: -4px 0 0; font-size: 0.85rem; color: #7a6f60; }
/* 複数選べる質問:選択中は色を付け、左のチェック印でも分かるようにする(色だけに頼らない) */
.fact-confirm-choice-btn.is-toggle { display: flex; align-items: center; gap: 12px; }
.fact-choice-mark {
  flex: none; width: 24px; height: 24px; border-radius: 6px;
  border: 2px solid var(--line); background: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: bold; line-height: 1; color: white;
}
.fact-confirm-choice-btn.is-selected {
  border: 2px solid var(--accent); background: #fbe9d8; font-weight: 600;
  padding: 9px 13px; /* 枠が太くなる分を詰めて、文字の位置を動かさない */
}
.fact-confirm-choice-btn.is-selected .fact-choice-mark { background: var(--accent); border-color: var(--accent); }
.fact-confirm-choice-btn.is-selected .fact-choice-mark::before { content: "✓"; }
.fact-confirm-done-btn {
  width: 100%; min-height: 52px; margin-top: 6px;
  /* 選択肢が多くても、スクロールせずに押せるよう画面の下に留める */
  position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 5;
  box-shadow: 0 4px 14px rgba(58, 50, 38, 0.18);
}
.fact-confirm-other { display: flex; gap: 8px; margin-top: 4px; }
.fact-confirm-other .chip-btn { min-height: 44px; padding: 0 18px; }
.fact-confirm-other-input {
  flex: 1; font: inherit; font-size: 1rem; /* 16px 未満だと iPhone で入力時に画面が拡大される */
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg);
}
.fact-question-area { display: flex; flex-direction: column; gap: 12px; }
.fact-question-bubble {
  background: var(--bg2); border-radius: 12px; padding: 12px 14px;
  font-size: 0.95rem; line-height: 1.6; color: var(--fg);
}
.fact-answer-input {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 0.95rem;
  padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); resize: vertical; min-height: 72px;
}
.fact-answer-input:focus { outline: 2px solid var(--accent); }
.fact-answer-btns { display: flex; gap: 8px; justify-content: flex-end; }
.fact-next-btn {
  font: inherit; font-size: 0.9rem;
  padding: 10px 18px; border: none;
  border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff;
}
.fact-next-btn:disabled { opacity: 0.4; cursor: default; }
.fact-skip-btn {
  font: inherit; font-size: 0.9rem;
  padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--fg-sub, #888);
}
.fact-summary { display: flex; flex-direction: column; gap: 8px; }
.fact-summary h4 { margin: 0 0 8px; font-size: 0.95rem; color: var(--fg-sub, #888); }
.fact-summary-list { display: flex; flex-direction: column; gap: 8px; }
.fact-summary-item { display: flex; gap: 10px; align-items: flex-start; }
.fact-summary-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.fact-summary-content { flex: 1; font-size: 0.88rem; color: var(--fg-sub, #888); line-height: 1.5; }
.fact-add-btn {
  font: inherit; font-size: 0.85rem;
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--fg); margin-top: 4px;
}
.fact-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.fact-add-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fact-add-textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 0.9rem;
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); resize: vertical; min-height: 56px;
}
.fact-add-submit-btn {
  align-self: flex-end; font: inherit; font-size: 0.85rem;
  padding: 7px 14px; border: none;
  border-radius: 999px; background: var(--accent); color: #fff; cursor: pointer;
}

/* --- 写真を差し替える --- */
.photo-replace-menu .page-menu-body { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.photo-replace-menu .hint { margin: 0; font-size: 0.85rem; color: #7a6f5c; }
.photo-replace-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.photo-replace-field input[type="file"] { font: inherit; }
.photo-replace-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.9rem;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.photo-replace-btn {
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: 0.9rem;
  cursor: pointer;
}
.photo-replace-btn:disabled { opacity: 0.45; cursor: default; }
.photo-replace-status { font-size: 0.85rem; color: #c0392b; }

/* --- この絵を少し直す(Phase 4.6・課題⑩) --- */
.page-edit-menu .page-menu-body { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.page-edit-menu .hint { margin: 0; }
.illust-edit-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.illust-edit-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px; /* スマホで入力欄を押したときに画面が拡大されないように */
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
}
.page-edit-menu button {
  align-self: flex-start;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  font-size: 0.9rem;
  cursor: pointer;
}
.page-edit-menu button.chip-btn { background: var(--ink); color: white; border-color: var(--ink); }
.page-edit-menu button:disabled { opacity: 0.45; cursor: default; }
.page-edit-menu button.is-busy { display: inline-flex; align-items: center; gap: 6px; opacity: 1; cursor: progress; }
.page-edit-menu button.is-busy::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: regen-spin 0.8s linear infinite;
}
.page-edit-menu .page-actions { gap: 10px; }
.illust-edit-status { margin: 0; font-size: 0.9rem; font-weight: bold; }
.illust-edit-status.is-busy { display: flex; align-items: center; gap: 8px; color: #7a5a1e; }
.illust-edit-status.is-busy::before {
  content: "";
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: regen-spin 0.8s linear infinite;
}
.illust-edit-status.is-ready { color: #3d7a3d; }
.illust-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.illust-compare.is-spread { grid-template-columns: 1fr; }
.illust-compare figure { margin: 0; min-width: 0; }
.illust-compare img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.illust-compare figcaption { text-align: center; font-size: 0.8rem; color: #6b6258; margin-top: 2px; }

/* --- 本文を絵の上に直接置く(Phase 4.6・課題⑪)。印刷と同じく、帯・箱は敷かず、文字のまわりだけに淡い紙色のふちどりを付ける --- */
.preview-page.is-text-overlay .preview-page-caption,
.preview-page.is-text-overlay .preview-page-caption.is-layout-top,
.preview-page.is-text-overlay .preview-page-caption.is-freeform,
.preview-page.is-text-overlay .preview-page-caption.is-layout-upper_left,
.preview-page.is-text-overlay .preview-page-caption.is-layout-upper_right,
.preview-page.is-text-overlay .preview-page-caption.is-layout-lower_left,
.preview-page.is-text-overlay .preview-page-caption.is-layout-lower_right {
  background: none;
  color: #3a2e22;
  text-shadow:
    0 0 0.06em rgba(251, 246, 238, 0.95),
    0 0 0.12em rgba(251, 246, 238, 0.95),
    0 0 0.22em rgba(251, 246, 238, 0.85),
    0 0 0.45em rgba(251, 246, 238, 0.65);
}

/* 行ごとの薄いもや(印刷の lineVeilSvg と同じ考え方。2026-10-04)。box-shadow は行の配置に影響しないので、文字の位置は変わらない */
.preview-page.is-text-overlay .cap-line {
  background: rgba(251, 246, 238, 0.55);
  box-shadow: 0 0 0.3em 0.3em rgba(251, 246, 238, 0.55);
  border-radius: 0.45em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 3-8:本文配置エリアが暗い絵(夜景・影の多い写真等)では白文字+暗いもやに切り替える */
.preview-page.is-text-overlay.is-dark-illust .preview-page-caption,
.preview-page.is-text-overlay.is-dark-illust .preview-page-caption.is-layout-top,
.preview-page.is-text-overlay.is-dark-illust .preview-page-caption.is-freeform,
.preview-page.is-text-overlay.is-dark-illust .preview-page-caption.is-layout-upper_left,
.preview-page.is-text-overlay.is-dark-illust .preview-page-caption.is-layout-upper_right,
.preview-page.is-text-overlay.is-dark-illust .preview-page-caption.is-layout-lower_left,
.preview-page.is-text-overlay.is-dark-illust .preview-page-caption.is-layout-lower_right {
  color: #f5f0e8;
  text-shadow:
    0 0 0.06em rgba(20, 15, 8, 0.95),
    0 0 0.12em rgba(20, 15, 8, 0.95),
    0 0 0.22em rgba(20, 15, 8, 0.85),
    0 0 0.45em rgba(20, 15, 8, 0.65);
}
.preview-page.is-text-overlay.is-dark-illust .cap-line {
  background: rgba(20, 15, 8, 0.45);
  box-shadow: 0 0 0.3em 0.3em rgba(20, 15, 8, 0.45);
}

/* 「絵本を見る」の先頭の表紙(2026-10-05)。表紙が無いときの案内 */
.preview-cover-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1em;
  text-align: center;
  color: var(--ink, #3a3226);
  opacity: 0.7;
}

/* 表紙タイトルのデザイン(少し直す) */
.cover-design-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 10px;
}
.cover-design-option.is-selected {
  outline: 2px solid var(--accent, #e07a5f);
  outline-offset: 1px;
  font-weight: 700;
}
.cover-design-details summary {
  cursor: pointer;
  font-size: 0.9em;
  margin: 4px 0;
}

/* 表紙に使う写真(少し直す) */
.cover-photo-details summary {
  cursor: pointer;
  margin: 8px 0 4px;
}
.cover-photo-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  margin: 6px 0 10px;
}
.cover-photo-option {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  text-align: left;
}
.cover-photo-option img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}
.cover-photo-option.is-unsuitable img {
  opacity: 0.45;
}
.cover-photo-option.is-selected {
  border-color: var(--accent, #d98a4a);
}
.cover-photo-option .cover-photo-badges {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  margin-top: 2px;
  color: var(--ink, #3a3226);
}
.cover-photo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- 2026-10-06 見開きプレビュー(「本を開いて見る」)--- */
/* 見開き(2ページ):左右をくっつけ、真ん中にごくうすい綴じ目の影を入れる(ページの絵を邪魔しない強さ) */
.preview-viewer.is-two-up { gap: 0; position: relative; }
.preview-viewer.is-two-up > :first-child { border-radius: 10px 0 0 10px; }
.preview-viewer.is-two-up > :last-child { border-radius: 0 10px 10px 0; }
.preview-viewer.is-two-up::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 28px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(to right, rgba(58, 50, 38, 0) 0%, rgba(58, 50, 38, 0.09) 42%, rgba(58, 50, 38, 0.16) 50%, rgba(58, 50, 38, 0.09) 58%, rgba(58, 50, 38, 0) 100%);
}
/* 左右で1枚の絵(見開きの絵)は、綴じ目の影をさらに弱くして1枚に見せる */
.preview-viewer.is-spread-view::after { opacity: 0.35; }
/* 空白ページ(本文1ページ目の左・最後の本文の右):紙色の何も無いページ */
.preview-viewer.is-two-up .preview-page-placeholder {
  visibility: visible; background: #fbf6ee; box-shadow: 0 2px 12px rgba(58, 50, 38, 0.12);
}
/* 裏表紙:印刷(backCoverService)と同じ紙色・一文・KONOKORO。位置(上から68%)と文字の大きさの比も同じ */
.preview-back-cover { background: #f7f1e6; }
.preview-back-cover-block { position: absolute; left: 0; right: 0; top: 68%; transform: translateY(-50%); text-align: center; }
.preview-back-cover-tagline { margin: 0 0 3.5cqw; font-size: 2.4cqw; letter-spacing: 0.08em; color: #9b8c78; }
.preview-back-cover-brand { margin: 0; font-size: 3cqw; letter-spacing: 0.32em; color: #8a7a66; }
/* スマホの縦向きの「見開きで見る」と、横向きの案内 */
.preview-spread-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.preview-spread-cta[hidden] { display: none; }
.preview-rotate-note { margin: 0; padding: 6px 12px; border-radius: 8px; background: #fdf1e3; color: #6b4a22; font-size: 0.85rem; }
/* スマホの横向きで「絵本を見る」を開いているとき:ヘッダーなどを隠し、画面の高さいっぱいに本を見せる */
@media (orientation: landscape) and (max-height: 500px) {
  body.is-preview-active .topbar,
  body.is-preview-active #book-title,
  body.is-preview-active #book-status,
  body.is-preview-active #generation-summary,
  body.is-preview-active #book-section .tabs,
  body.is-preview-active #preview-view .book-actions { display: none !important; }
  body.is-preview-active main { max-width: none; padding: 4px 8px; gap: 0; }
  body.is-preview-active #book-section { padding: 4px; border: none; background: transparent; }
  body.is-preview-active .preview-viewer .preview-page,
  body.is-preview-active .preview-viewer .preview-page-placeholder { max-width: calc(100vh - 60px); max-width: calc(100dvh - 60px); }
  body.is-preview-active .preview-nav { margin-top: 6px; }
}

/* --- 2026-10-06 下書きの削除 --- */
/* カードと「︙」は別々のボタン。「︙」はカードの右上に重ね、カードの文字とは重ならないよう右側を空ける */
.album-list-row { position: relative; }
.album-list-row.has-menu .album-list-item { padding-right: 56px; }
.album-list-row.is-deleting { opacity: 0.5; }
.album-list-menu-btn {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border-radius: 999px;
  border: none; background: transparent; color: #7a6f5c; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.album-list-menu-btn:hover, .album-list-menu-btn[aria-expanded="true"] { background: var(--paper); }
.album-list-menu-btn:disabled { opacity: 0.4; cursor: default; }
.album-list-menu {
  position: absolute; top: 50px; right: 6px; z-index: 5; min-width: 150px; padding: 6px;
  background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 20px rgba(58, 50, 38, 0.18);
}
.album-list-menu[hidden] { display: none; }
.album-list-menu-delete {
  display: block; width: 100%; min-height: 44px; padding: 8px 14px; border: none; border-radius: 8px;
  background: none; color: #b3392f; font: inherit; font-weight: bold; text-align: left; cursor: pointer;
}
.album-list-menu-delete:hover { background: #fbeeec; }
/* 確認のダイアログ:見出し・本文の改行・元に戻せない操作のボタン(塗りつぶしの赤) */
.confirm-dialog-title { margin: 0 0 10px; font-size: 1.05rem; }
.confirm-dialog p { white-space: pre-line; }
.danger-btn.is-strong { background: #b3392f; border-color: #b3392f; color: white; font-weight: bold; }

/* --- 2026-10-06 動画から選んだ画像(写真の一覧のカード:静止画+「動画から選択」+文字起こし+ひとこと)--- */
.photo-video-badge {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px;
  background: rgba(58, 50, 38, 0.78); color: #fff; font-size: 0.72rem; line-height: 1.5; pointer-events: none;
}
.photo-card-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.photo-transcript { padding: 8px 10px; border-radius: 8px; background: #f6f0e4; border: 1px solid var(--line); font-size: 0.82rem; }
.photo-transcript-label { font-weight: bold; color: #7a6f5c; font-size: 0.75rem; margin-bottom: 2px; }
.photo-transcript-text { margin: 0; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12em; overflow-y: auto; }
.photo-transcript-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: none; }
.photo-transcript-status { margin: 0; color: #7a6f5c; line-height: 1.5; }
.photo-transcript-more { border: none; background: none; padding: 4px 0 0; color: #a3561d; font: inherit; font-size: 0.8rem; font-weight: bold; cursor: pointer; }
.photo-transcript-use { margin-top: 6px; }
.photo-transcript .capture-retry-btn { margin-top: 6px; }
@media (max-width: 480px) {
  /* スマホ:左に写真、右に「文字起こし → ひとこと」(ひとことの欄は書きやすい高さを保つ) */
  .photo-card.is-video-frame .photo-card-side { flex: 1; }
  .photo-card.is-video-frame .photo-memo-input { min-height: 88px; }
}
/* 動画の画像のカードは右側(文字起こし+ひとこと)が縦に長いので、写真の枠を写真の高さに合わせる(「動画から選択」を写真の下端に重ねるため) */
.photo-card.is-video-frame .photo-card-thumb { align-self: flex-start; }
.photo-video-badge { white-space: nowrap; font-size: 0.66rem; padding: 2px 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }

/* --- テスト運用モード(TRIAL_MODE) --- */
/* <a> タグに primary-btn クラスを付けたときの表示調整 */
a.primary-btn { display: block; text-align: center; text-decoration: none; }
/* hidden 属性が class の display: block に負けないよう明示する */
a.primary-btn[hidden] { display: none; }

/* 完成プレビュー内「この後の流れ」ボックス */
.trial-next-info {
  background: #fdf5e8;
  border: 1px solid #e0c8a0;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 16px 0 4px;
  font-size: 0.9rem;
  line-height: 1.7;
}
.trial-next-info p { margin: 0 0 6px; }
.trial-next-info p:last-child { margin-bottom: 0; }
.trial-free-note { color: #7a6f5c; font-size: 0.85rem; }

/* テスト利用完了フォーム画面 */
.trial-form-btn { margin: 16px 0 4px; }
.trial-form-return-hint { margin-top: 4px; }

/* テスト利用完了画面 */
#trial-done-view { text-align: center; padding: 8px 0; }
#trial-done-view h2 { font-size: 1.2rem; margin-bottom: 12px; }
#trial-done-view p { margin: 0 0 10px; line-height: 1.8; }

/* 個人情報の取り扱い同意モーダル(既存ユーザー向け) */
.privacy-consent-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.privacy-consent-modal[hidden] { display: none; }
.privacy-consent-modal-inner {
  background: #fff; border-radius: 14px;
  padding: 24px 20px; max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.privacy-consent-modal-inner h2 { margin: 0 0 12px; font-size: 1.1rem; }
.privacy-consent-modal-inner h3 { font-size: 0.95rem; margin: 14px 0 4px; }
.privacy-consent-modal-inner ul { margin: 4px 0; padding-left: 18px; line-height: 1.7; font-size: 0.9rem; }
.privacy-consent-modal-inner li { margin: 2px 0; }
.privacy-consent-modal-body { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 12px 0; font-size: 0.9rem; max-height: 40vh; overflow-y: auto; }
.privacy-consent-modal-inner .primary-btn { margin-top: 16px; width: 100%; }
.privacy-decline-btn { margin-top: 10px; width: 100%; background: transparent; border: 1px solid var(--line); color: var(--fg); font-size: 0.9rem; padding: 10px; border-radius: 10px; cursor: pointer; }
.privacy-decline-btn:hover { background: var(--bg2, #f0ece6); }

/* AIインタビュアー */
.interview-start-btn {
  display: inline-block; margin-top: 6px;
  background: transparent; border: 1px solid var(--accent, #7a8fa6);
  color: var(--accent, #7a8fa6); border-radius: 20px;
  padding: 4px 12px; font-size: 0.82rem; cursor: pointer;
}
.interview-start-btn:hover { background: var(--accent-light, #eef2f7); }
.interview-dialog {
  border: none; border-radius: 14px; padding: 0;
  width: 90vw; max-width: 480px; max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.interview-dialog::backdrop { background: rgba(0,0,0,0.45); }
.interview-dialog-title { margin: 0; padding: 16px 20px 12px; font-size: 1rem; border-bottom: 1px solid var(--line, #e0dbd4); }
.interview-chat { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.interview-msg { max-width: 85%; border-radius: 12px; padding: 8px 12px; font-size: 0.92rem; line-height: 1.5; }
.interview-msg-ai { align-self: flex-start; background: var(--bg2, #f4f0ea); color: var(--fg, #333); }
.interview-msg-user { align-self: flex-end; background: var(--accent, #7a8fa6); color: #fff; }
.interview-msg-system { align-self: center; font-size: 0.82rem; color: var(--fg-sub, #888); }
.interview-input-area { padding: 10px 16px 14px; border-top: 1px solid var(--line, #e0dbd4); }
.interview-answer-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #e0dbd4); border-radius: 8px; padding: 8px 10px; font-size: 0.92rem; resize: none; }
.interview-input-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.interview-loading { padding: 12px 20px; font-size: 0.88rem; color: var(--fg-sub, #888); text-align: center; }
.interview-done-area { padding: 12px 20px 16px; border-top: 1px solid var(--line, #e0dbd4); display: flex; flex-direction: column; gap: 10px; }
.interview-done-area p { margin: 0; font-size: 0.92rem; }

/* 写真コメント入力セクション */
.photo-comment-section { margin-top: 8px; }
.photo-comment-heading { margin: 0 0 4px; font-size: 0.82rem; color: var(--accent, #7a8fa6); font-weight: normal; }
.photo-comment-body { display: flex; flex-direction: column; gap: 6px; }
.photo-comment-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #e0dbd4); border-radius: 6px; padding: 6px 8px; font-size: 0.85rem; resize: vertical; }
.photo-comment-footer { display: flex; justify-content: space-between; align-items: center; gap: 4px; min-height: 1.4em; }
.photo-comment-counter { font-size: 0.75rem; color: var(--fg-sub, #888); white-space: nowrap; }
.photo-comment-clear-btn { background: transparent; border: 1px solid var(--line, #e0dbd4); border-radius: 16px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; color: var(--fg-sub, #888); }
.photo-comment-clear-btn:disabled { opacity: 0.6; }
.photo-comment-status { font-size: 0.78rem; color: var(--fg-sub, #888); flex: 1; }
.photo-comment-status--saved { color: var(--accent, #7a8fa6); }
.photo-comment-status--error { color: #c0392b; }
.photo-comment-retry-btn { background: transparent; border: 1px solid currentColor; border-radius: 10px; padding: 1px 8px; font-size: 0.75rem; cursor: pointer; color: inherit; margin-left: 4px; }


/* 必須インタビューステップ（ENABLE_ELICITATION=1 時のみ表示） */
.interview-step-progress {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg, #fff); border-bottom: 1px solid var(--line, #e0dbd4);
  padding: 8px 0 10px; margin: 0 0 12px;
}
.interview-step-photo-label { font-size: 0.85rem; color: var(--fg-sub, #888); margin: 0 0 6px; }
.interview-step-thumb-wrap img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
.interview-step-chat { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; min-height: 40px; }
.interview-step-msg { max-width: 90%; border-radius: 12px; padding: 8px 12px; font-size: 0.92rem; line-height: 1.5; }
.interview-step-msg-ai { align-self: flex-start; background: var(--bg2, #f4f0ea); color: var(--fg, #333); }
.interview-step-msg-user { align-self: flex-end; background: var(--accent, #7a8fa6); color: #fff; }
.interview-step-msg-system { align-self: center; font-size: 0.82rem; color: var(--fg-sub, #888); }
.interview-step-input { display: flex; flex-direction: column; gap: 8px; }
.interview-step-answer { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #e0dbd4); border-radius: 8px; padding: 8px 10px; font-size: 0.92rem; resize: none; }
.interview-step-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.interview-step-skip-btn { font-size: 0.82rem; color: var(--fg-sub, #888); flex-shrink: 0; }
.interview-step-btns .primary-btn { margin-left: auto; }
.interview-skip-hint { font-size: 0.8rem; color: var(--fg-sub, #888); margin: 0 0 4px; }
.interview-step-loading { font-size: 0.88rem; color: var(--fg-sub, #888); padding: 6px 0; }
.interview-step-done { font-size: 0.9rem; color: var(--fg-sub, #888); padding: 6px 0; }
.page-memory { margin-top: 6px; }
.page-memory > summary { font-size: 0.8rem; color: var(--fg-sub, #888); cursor: pointer; }
.page-memory-list { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.page-memory-list li { font-size: 0.78rem; color: var(--fg-sub, #888); line-height: 1.5; }
.page-memory-label { display: inline-block; font-size: 0.7rem; background: var(--bg2, #f4f0ea); border-radius: 8px; padding: 1px 6px; margin-right: 4px; white-space: nowrap; }
.page-text-ready-hint { font-size: 0.78rem; color: var(--accent, #7a8fa6); margin-top: 4px; }
.print-readiness { margin-top: 6px; border-radius: 6px; padding: 6px 10px; font-size: 0.82rem; }
.print-readiness--ok { background: #e8f5e9; color: #2e7d32; }
.print-readiness--ng { background: #fff3e0; color: #e65100; }
.print-readiness--ng ul { margin: 4px 0 0; padding-left: 1.2em; }
.print-readiness--ng li { font-size: 0.78rem; }
.interview-facts-summary { margin-top: 12px; }
.facts-summary-heading { font-size: 0.88rem; font-weight: bold; margin: 0 0 8px; color: var(--fg, #333); }
.facts-card { background: var(--bg2, #f4f0ea); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.facts-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.facts-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.facts-card-order { font-size: 0.8rem; font-weight: bold; color: var(--fg-sub, #888); }
.facts-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.facts-list li { font-size: 0.82rem; color: var(--fg, #333); line-height: 1.5; }
.facts-label { display: inline-block; font-size: 0.75rem; background: var(--accent, #7a8fa6); color: #fff; border-radius: 10px; padding: 1px 7px; margin-right: 6px; white-space: nowrap; }

/* ===== ヘルプTip ===== */
.help-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--accent, #7a8fa6); background: transparent;
  color: var(--accent, #7a8fa6); font-size: 0.72rem; font-weight: bold;
  cursor: pointer; vertical-align: middle; margin-left: 4px; padding: 0;
  line-height: 1; flex-shrink: 0;
}
.help-trigger:hover { background: var(--accent, #7a8fa6); color: #fff; }
.help-tip-card {
  background: var(--bg2, #f4f0ea); border: 1px solid var(--line, #e0dbd4);
  border-radius: 8px; padding: 10px 12px; margin-top: 6px;
  font-size: 0.84rem; color: var(--fg, #333); line-height: 1.6;
}
.help-tip-card p { margin: 0 0 6px; }
.help-tip-card p:last-of-type { margin-bottom: 0; }
.help-tip-card ul { margin: 4px 0 0 16px; padding: 0; }
.help-tip-card li { margin-bottom: 2px; }
.help-tip-close {
  display: block; margin-top: 8px;
  background: transparent; border: 1px solid var(--line, #e0dbd4);
  border-radius: 12px; padding: 3px 10px;
  font-size: 0.78rem; color: var(--fg-sub, #888); cursor: pointer;
}
.help-tip-close:hover { background: var(--line, #e0dbd4); }

/* ===== 使い方マニュアル モーダル ===== */
.help-manual-modal {
  border: none; border-radius: 16px; padding: 0;
  width: min(700px, calc(100vw - 32px));
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  background: var(--bg, #fff); color: var(--fg, #333);
}
.help-manual-modal::backdrop { background: rgba(0,0,0,0.45); }
.help-manual-inner { display: flex; flex-direction: column; }
.help-manual-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--line, #e0dbd4);
  background: var(--bg, #fff);
}
.help-manual-header h2 { margin: 0; font-size: 1.1rem; }
.help-manual-close {
  background: transparent; border: 1px solid var(--line, #e0dbd4);
  border-radius: 999px; padding: 4px 14px;
  font-size: 0.85rem; color: var(--fg-sub, #888); cursor: pointer;
}
.help-manual-close:hover { background: var(--line, #e0dbd4); color: var(--fg, #333); }
.help-manual-toc {
  padding: 14px 20px 10px; border-bottom: 1px solid var(--line, #e0dbd4);
  background: var(--bg2, #f9f6f2);
}
.help-manual-toc-list {
  margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px;
}
.help-manual-toc-list a {
  font-size: 0.88rem; color: var(--accent, #7a8fa6); text-decoration: none;
}
.help-manual-toc-list a:hover { text-decoration: underline; }
.help-manual-body { padding: 0 20px 24px; }
.help-manual-section { padding: 20px 0; border-bottom: 1px solid var(--line, #e0dbd4); }
.help-manual-section:last-child { border-bottom: none; }
.help-manual-section h3 { font-size: 1rem; margin: 0 0 12px; color: var(--fg, #333); }
.help-manual-section h4 { font-size: 0.9rem; margin: 14px 0 8px; }
.help-manual-section p { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.65; }
.help-manual-section ul, .help-manual-section ol { padding-left: 20px; margin: 0 0 8px; font-size: 0.9rem; line-height: 1.65; }
.help-manual-section li { margin-bottom: 4px; }
.help-faq { display: flex; flex-direction: column; gap: 14px; }
.help-faq div { display: flex; flex-direction: column; gap: 2px; }
.help-faq dt { font-weight: bold; font-size: 0.9rem; }
.help-faq dd { margin: 0; font-size: 0.9rem; color: var(--fg-sub, #555); line-height: 1.6; }

/* コメントの書き方の見本 */
.comment-sample-guide { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; font-size: 0.88rem; }
.comment-sample-guide > summary { cursor: pointer; color: #7a6f5c; padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 4px; }
.comment-sample-guide > summary::before { content: "▶"; font-size: 0.7em; transition: transform 0.2s; }
.comment-sample-guide[open] > summary::before { transform: rotate(90deg); }
.comment-sample-guide > summary::-webkit-details-marker { display: none; }
.comment-sample-body { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.comment-sample-heading { font-weight: bold; font-size: 0.92rem; margin: 0; color: var(--fg, #333); }
.comment-sample-block { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; }
.comment-sample-comment { background: #f5f0e8; }
.comment-sample-book { background: #eef4f0; }
.comment-sample-label { font-size: 0.75rem; font-weight: bold; color: #7a6f5c; letter-spacing: 0.04em; }
.comment-sample-text { margin: 0; line-height: 1.7; color: var(--fg, #333); font-size: 0.88rem; }
.comment-sample-book .comment-sample-text { font-size: 0.92rem; letter-spacing: 0.03em; }
.comment-sample-arrow { text-align: center; color: #7a6f5c; font-size: 1.1rem; line-height: 1; }
.comment-sample-note { margin: 0; font-size: 0.75rem; color: #a09080; }