/* ============================================================
   app-mock.css
   ------------------------------------------------------------
   KATANA Script のアプリ画面をWebページ上で再現するためのCSS。

   ★方針
     アプリ本体（app/css/layout.css・theme.css・page-setup*.css・
     script-styles*.css）を実際にブラウザで開いて計測した値を、
     そのまま持ってきている。寸法はすべてアプリの実寸（96dpi）。

       タイトルバー 40px ／ ヘッダー上段 44px ／ ツールバー段 56px
       サイドバー 230px ／ フッター 34px
       様式ボタン 64×48px（アイコン24pxが上・ラベル10.5pxが下）
       用紙 A4 = 210×297mm を 96dpi 換算（793.688 × 1122.52px）

     ツールバーは中央揃え（アプリ本体の
     .header-row--tools { justify-content: center } と同じ）。

   ★操作できないこと
     このブロックは「見せるだけ」なので中の要素はすべて
     pointer-events: none。実際に触れるのは外側の様式スイッチだけ。

   ★構成
     1) 拡大縮小のしくみ  2) ウィンドウ枠    3) タイトルバー
     4) ヘッダー（2段）   5) サイドバー      6) 用紙（洋式）
     7) 用紙（和式）      8) フッター        9) 周りの装飾
   ============================================================ */

/* ============================================================
   1) 拡大縮小のしくみ
   ------------------------------------------------------------
   アプリ画面は 1300 × 924 の固定サイズで組み、入る幅へ
   transform: scale() で縮める。中のレイアウトを作り直さずに済むので、
   どの画面幅でも比率が完全に保たれる。
   倍率は JS（app-mock.js）が --mock-scale に入れる。
   ============================================================ */
.mock-stage {
  position: relative;
  width: 100%;
}

/* 縮めたあとの実寸ぶんだけ場所をとる箱。
   これが無いと scale() は見た目だけ縮んで、下の要素との間に
   元の高さぶんの空白が残ってしまう。 */
.mock-track {
  position: relative;
  width: var(--track-w, 1300px);
  height: var(--track-h, 924px);
  margin-inline: auto;
}

.mock-scaler {
  position: absolute;
  top: 0;
  left: 0;
  width: 1300px;
  height: 924px;
  transform: scale(var(--mock-scale, 1));
  transform-origin: top left;
}

/* ============================================================
   2) ウィンドウ枠
   ============================================================ */
.mock {
  /* ---- アプリ画面の実寸（app/css/layout.css の変数と同じ） ---- */
  --mock-w: 1300px;
  --mock-h: 924px;
  --titlebar-h: 40px;
  --headerrow-h: 44px;
  --tools-h: 56px;
  --footer-h: 34px;
  --sidebar-w: 230px;

  /* ---- 配色（app/css/theme.css のライトモードと同じ値） ---- */
  --m-accent: #1b4a66;
  --m-accent-dark: #14384d;
  --m-accent-soft: #e4eff6;
  --m-on-accent: #ffffff;
  --m-app-bg: #ffffff;
  --m-ribbon-bg: #f3f2f1;
  --m-canvas-bg: #e7e9eb;
  --m-border: #d6d6d6;
  --m-surface: #ffffff;
  --m-surface-alt: #fafafa;
  --m-surface-hover: #f5f5f5;
  --m-text: #1f1f1f;
  --m-text-secondary: #666666;
  --m-text-muted: #888888;
  --m-text-faint: #aaaaaa;
  --m-page-bg: #ffffff;
  --m-page-text: #1f1f1f;
  --m-page-guide: #e0e0e0;
  --m-page-number: #888888;
  --m-scene-number: #444444;
  --m-chapter-num: #444444;
  --m-title-icon: #696969;
  --m-char-unset: #8a8a8a;
  --m-char-male: #3a76c4;
  --m-char-female: #d4568c;

  /* アプリのUIフォント（app/css/reset.css と同じ並び） */
  --m-font-ui: "Yu Gothic UI", Meiryo, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", sans-serif;

  /* 1mm を96dpiのpxに直した値。用紙の寸法はすべてこれの倍数で書く。 */
  --mm: 3.779528px;

  position: relative;
  width: var(--mock-w);
  height: var(--mock-h);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: var(--m-app-bg);
  color: var(--m-text);
  font-family: var(--m-font-ui);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid rgba(11, 23, 31, 0.1);
  box-shadow: 0 2px 4px rgba(11, 23, 31, 0.05),
    0 24px 48px -12px rgba(11, 23, 31, 0.22),
    0 60px 120px -30px rgba(11, 23, 31, 0.25);
  /* 中身は一切触らせない */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 画面に入ってきたときだけ、わずかに起き上がる */
.mock-scaler .mock {
  transition: transform 900ms var(--ease-out), opacity 900ms var(--ease-out);
}

.mock-stage:not(.is-in) .mock {
  opacity: 0;
  transform: perspective(1800px) rotateX(7deg) translateY(28px);
}

.mock-stage.is-in .mock {
  opacity: 1;
  transform: perspective(1800px) rotateX(0deg) translateY(0);
}

/* ============================================================
   3) タイトルバー（Electron版のカスタムタイトルバー）
   ------------------------------------------------------------
   左：マーク＋メニュー ／ 中央：アプリ名 ／ 右：表示切替＋ー□×
   ============================================================ */
.mock__titlebar {
  flex: 0 0 var(--titlebar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 8px;
  background: var(--m-app-bg);
  border-bottom: 1px solid var(--m-border);
  position: relative;
}

/* アプリのマーク。SVGはHTMLに直接埋め込んである（index.html の #ks-mark）。
   元のSVGは 200×152 なので、高さから幅を比率で出す
   （アプリ本体 .title-bar__mark と同じ）。 */
.mock__mark {
  --mark-h: 17px;
  height: var(--mark-h);
  width: calc(var(--mark-h) * 200 / 152);
  flex: 0 0 auto;
  margin-right: 6px;
  color: var(--m-accent);
}

.mock__menu {
  display: flex;
  align-items: center;
}

.mock__menu span {
  padding: 4px 10px;
  font-size: 12.5px;
  border-radius: 4px;
  color: var(--m-text);
  white-space: nowrap;
}

/* アプリ名はタイトルバーの中央に絶対配置（メニューの長さに左右されない） */
.mock__appname {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12.5px;
  color: var(--m-text-muted);
  white-space: nowrap;
}

.mock__winbtns {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 表示設定（ダークモード）ボタン */
.mock__themebtn {
  width: 34px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-right: 4px;
  color: var(--m-title-icon);
}

.mock__themebtn svg {
  width: 16px;
  height: 16px;
}

/* OSが描くウィンドウ操作ボタン ─ □ ✕ */
.mock__wctl {
  width: 46px;
  height: 39px;
  display: grid;
  place-items: center;
  color: var(--m-text);
}

.mock__wctl svg {
  width: 10px;
  height: 10px;
}

/* ============================================================
   4) ヘッダー（上段：タイトル／下段：様式ツールバー）
   ============================================================ */
.mock__header {
  flex: 0 0 auto;
  background: var(--m-app-bg);
  border-bottom: 1px solid var(--m-border);
}

.mock__headerrow {
  display: flex;
  align-items: center;
  height: var(--headerrow-h);
  padding: 0 12px;
}

/* 1段目：元に戻す／やり直す ＋ タイトル ＋ PDF出力 */
.mock__headerrow--top {
  justify-content: space-between;
  border-bottom: 1px solid var(--m-border);
}

.mock__headerleft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* 元に戻す／やり直す。原稿を開いた直後は押せないので薄く出す。 */
.mock__histbtn {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 1px solid var(--m-border);
  background: var(--m-surface);
  color: var(--m-text);
  font-size: 15px;
  line-height: 1;
  opacity: 0.35;
}

.mock__title-input {
  min-width: 120px;
  max-width: 480px;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PDF出力ボタン。アプリ本体は文字だけでアイコンは無い。 */
.mock__primary {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid var(--m-accent);
  background: var(--m-accent);
  color: var(--m-on-accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- 2段目：様式ツールバー（★中央揃え） ---- */
.mock__headerrow--tools {
  height: var(--tools-h);
  background: var(--m-ribbon-bg);
  justify-content: center;
}

.mock__toolbar {
  display: flex;
  gap: 6px;
}

/* 様式ボタン。アイコン(24px)が上、ラベル(10.5px)が下の縦積み。 */
.mock__stylebtn {
  width: 64px;
  height: 48px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--m-border);
  background: var(--m-surface);
  color: var(--m-text);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  transition: background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 「章」だけは常にアクセント色の枠（アプリ本体 .style-btn--chapter と同じ） */
.mock__stylebtn[data-style="chapter"] {
  color: var(--m-accent-dark);
  border-color: var(--m-accent);
}

/* いま書いているスタイルのボタン（作動中） */
.mock__stylebtn.is-active {
  background: var(--m-accent);
  border-color: var(--m-accent);
  color: var(--m-on-accent);
}

/* アイコン本体。SVGはHTMLに直接埋め込んであり（index.html の #ks-〇〇）、
   塗りは currentColor。ボタンの文字色が状態で変われば、アイコンも
   自動で追従する（別に色を指定する必要はない）。 */
.mock__stylebtn svg {
  width: 24px;
  height: 24px;
  flex: none;
}

.mock__sep {
  width: 1px;
  height: 32px;
  margin: 0 4px;
  align-self: center;
  background: var(--m-border);
}

/* ============================================================
   5) 本体（サイドバー＋編集エリア）
   ============================================================ */
.mock__body {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ---- サイドバー ---- */
.mock__side {
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  background: var(--m-surface-alt);
  border-right: 1px solid var(--m-border);
  overflow: hidden;
}

.mock__tabs {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--m-border);
}

.mock__tab {
  flex: 1 1 0;
  padding: 6px 4px 7px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--m-text-muted);
  border-bottom: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s;
}

.mock__tab.is-active {
  color: var(--m-accent);
  border-bottom-color: var(--m-accent);
}

.mock__panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mock__panel[hidden] {
  display: none;
}

.mock__hint {
  margin: 0;
  padding: 4px 4px 10px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--m-text-faint);
}

/* 一覧に中身が入ったら案内文は引っ込める（アプリ側と同じふるまい） */
.mock__panel:has(.mock__nav-group) .mock__hint,
.mock__panel:has(.mock__char-row) .mock__hint {
  display: none;
}

/* ---- シーン一覧（章グループ ＞ 柱） ---- */
.mock__scene-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mock__nav-group {
  margin-bottom: 4px;
}

.mock__nav-group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--m-accent-dark);
}

.mock__nav-arrow {
  flex: 0 0 auto;
  font-size: 10px;
  line-height: 1;
}

.mock__nav-group-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock__nav-children {
  margin: 0;
  padding: 0 0 0 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mock__nav-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--m-text);
  white-space: nowrap;
  overflow: hidden;
  animation: mockRowIn 380ms var(--ease-out) both;
}

.mock__nav-item.is-current {
  background: var(--m-accent-soft);
  font-weight: 700;
  color: var(--m-accent-dark);
}

.mock__nav-num {
  flex: 0 0 auto;
  min-width: 1.4em;
  margin-right: 2px;
  text-align: right;
  font-weight: 700;
  color: var(--m-text-muted);
}

.mock__nav-item.is-current .mock__nav-num {
  color: var(--m-accent-dark);
}

.mock__nav-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes mockRowIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- 登場人物一覧 ---- */
.mock__char-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mock__char-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-radius: 4px;
  animation: mockRowIn 380ms var(--ease-out) both;
}

.mock__avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: var(--m-char-unset);
}

.mock__avatar[data-gender="male"] {
  background: var(--m-char-male);
}
.mock__avatar[data-gender="female"] {
  background: var(--m-char-female);
}

.mock__char-name {
  font-size: 12.5px;
  color: var(--m-text);
  line-height: 1.4;
}

.mock__char-add {
  width: 100%;
  margin-top: 10px;
  padding: 7px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--m-accent);
  background: var(--m-surface);
  border: 1px dashed var(--m-border);
  border-radius: 4px;
}

/* ---- 編集エリア（用紙が並ぶ灰色の作業領域） ---- */
.mock__editor {
  flex: 1;
  min-width: 0;
  position: relative;
  background: var(--m-canvas-bg);
  overflow: hidden; /* 実際のスクロールは JS が translate で行う */
}

.mock__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 24px 66px;
  /* 打ち込みに合わせて JS が上へずらす */
  transform: translateY(var(--pages-y, 0px));
  will-change: transform;
}

/* 右端の細いスクロールバー（飾り） */
.mock__scrollbar {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  width: 10px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.04);
}

.mock__scrollbar i {
  position: absolute;
  left: 1px;
  right: 1px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.22);
  top: var(--thumb-top, 0%);
  height: var(--thumb-h, 30%);
}

/* ============================================================
   6) 用紙 ― 洋式（A4縦・横書き）
   ------------------------------------------------------------
   アプリの表示倍率100%と同じ実寸。
     用紙 210 × 297mm ／ 余白 上下25・左30・右20mm
     本文 10.5pt（= 14px）／ 行間 1.9
   ============================================================ */
.mock-page {
  position: relative;
  flex: 0 0 auto;
  background: var(--m-page-bg);
  color: var(--m-page-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* 用紙の外へはみ出した文字を隠す */
}

.mock-page--h {
  --zoom: 1;
  --u: calc(var(--mm) * var(--zoom)); /* 拡大率込みの1mm */
  --page-w: calc(210 * var(--u));
  --page-h: calc(297 * var(--u));
  --m-top: calc(25 * var(--u));
  --m-bottom: calc(25 * var(--u));
  --m-left: calc(30 * var(--u));
  --m-right: calc(20 * var(--u));
  --fs: calc(10.5pt * var(--zoom));

  width: var(--page-w);
  height: var(--page-h);
}

/* 余白の目印（うっすらした点線） */
.mock-page--h::before {
  content: "";
  position: absolute;
  top: var(--m-top);
  left: var(--m-left);
  right: var(--m-right);
  bottom: var(--m-bottom);
  border: 1px dashed var(--m-page-guide);
  pointer-events: none;
}

.mock-page__content {
  position: absolute;
  font-family: var(--font-mincho);
  color: var(--m-page-text);
}

.mock-page--h .mock-page__content {
  top: var(--m-top);
  left: var(--m-left);
  right: var(--m-right);
  bottom: var(--m-bottom);
  font-size: var(--fs);
  line-height: 1.9;
  writing-mode: horizontal-tb;
}

.mock-page__content p {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- 章 ---- */
.mock-page--h .sp-chapter {
  font-size: 1.15em;
  font-weight: 700;
  text-align: center;
  margin-top: 2.4em;
  margin-bottom: 1em;
  padding: 4em 0;
}

.mock-page--h .mock-page__content > .sp-chapter:first-child {
  margin-top: 0;
}

.mock-page--h .sp-chapter .sp-chapter__no {
  display: block;
  font-size: 0.9em;
  font-weight: 400;
  color: var(--m-chapter-num);
  margin-bottom: 0.1em;
  letter-spacing: 0.1em;
}

/* ---- 柱 ---- */
.mock-page--h .sp-scene {
  position: relative;
  font-weight: 700;
  font-size: 1.05em;
  text-align: left;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  padding: 1em 0 1em 1em;
}

.mock-page--h .mock-page__content > .sp-scene:first-child {
  margin-top: 0;
}

/* 柱の左、余白の外に出るシーン番号 */
.mock-page--h .sp-scene__no {
  position: absolute;
  top: 1em;
  left: calc(-1 * var(--m-left));
  width: calc(var(--m-left) - 3 * var(--u));
  padding-right: calc(3 * var(--u));
  text-align: right;
  font-weight: 700;
  color: var(--m-scene-number);
}

/* ---- ト書き ---- */
.mock-page--h .sp-action {
  margin: 0.2em 0;
  padding: 1em 0 1em 1em;
}

/* ---- 人物 ---- */
.mock-page--h .sp-chara {
  font-weight: 700;
  text-align: center;
  margin-top: 0.8em;
  padding: 1em 0 0.5em;
}

/* ---- セリフ ---- */
.mock-page--h .sp-dialog {
  margin-bottom: 0.2em;
  padding: 0 7em 2em;
}

/* （  ）を含む行は中央に置く（アプリの bracketCenter.js と同じ） */
.mock-page--h .sp-dialog.is-bracket {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* ---- 転換 ---- */
.mock-page--h .sp-transition-in,
.mock-page--h .sp-transition-out {
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 1.2em 0;
}

.mock-page--h .sp-transition-in {
  text-align: left;
}

.mock-page--h .sp-transition-out {
  text-align: right;
}

/* ---- ページ番号 ---- */
.mock-page__no {
  position: absolute;
  text-align: center;
  color: var(--m-page-number);
  pointer-events: none;
}

.mock-page--h .mock-page__no {
  bottom: calc(var(--m-bottom) / 2);
  left: var(--m-left);
  right: var(--m-right);
  font-family: var(--font-mincho);
  font-size: calc(9pt * var(--zoom));
}

/* ============================================================
   7) 用紙 ― 和式（A4横・縦書き）
   ------------------------------------------------------------
     用紙 297 × 210mm ／ 文字 5.85mm ／ 列ピッチ1.5倍
     20字 × 30列 ／ 罫線は用紙上端から71.5mm
   表示倍率は、用紙まるごとが編集エリアに収まる 90%。
   ============================================================ */
.mock-page--v {
  --zoom: 0.9;
  --u: calc(var(--mm) * var(--zoom));
  --vpage-w: calc(297 * var(--u));
  --vpage-h: calc(210 * var(--u));
  --vfs: calc(5.85 * var(--u));
  --v-pitch: calc(var(--vfs) * 1.5);
  --v-body-h: calc(var(--vfs) * 20);
  --v-rule-top: calc(71.5 * var(--u));
  --v-rule-gap: calc(var(--vfs) * 0.5);
  --v-side: calc(16.875 * var(--u));
  --v-num-h: calc(14.5 * var(--u));
  --v-box-pad: calc(3.2 * var(--u));
  --v-rule-w: calc(0.3 * var(--u));
  --v-body-top: calc(var(--v-rule-top) + var(--v-rule-gap));

  /* 段落と段落のあいだの列数（アプリの --v-gap-*-right と同じ） */
  --gap-chapter: calc(2 * var(--v-pitch));
  --gap-scene: calc(2 * var(--v-pitch));
  --gap-action: calc(2 * var(--v-pitch));
  --gap-speech: calc(1 * var(--v-pitch));
  --gap-transition: calc(1 * var(--v-pitch));

  width: var(--vpage-w);
  height: var(--vpage-h);
}

.mock-page--v .mock-page__content {
  top: var(--v-body-top);
  left: var(--v-side);
  right: var(--v-side);
  height: var(--v-body-h);
  font-size: var(--vfs);
  line-height: 1.5;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* 本文の上に引く1本の横罫線 */
.mock-page--v::after {
  content: "";
  position: absolute;
  top: var(--v-rule-top);
  left: var(--v-side);
  right: var(--v-side);
  height: 0;
  border-top: var(--v-rule-w) solid var(--m-page-text);
  pointer-events: none;
}

/* 段落共通のリセット。
   ★このあとの各スタイルは必ず `p.sp-xxx` と型セレクタ込みで書き、
     このリセットと同じ詳細度に揃えること。揃えないと padding:0 に負ける
     （アプリ本体の script-styles-vertical.css と同じ注意点）。 */
.mock-page--v .mock-page__content p {
  margin: 0;
  padding: 0;
  text-indent: 0;
  word-break: normal;
  line-break: strict;
  padding-block-start: var(--v-pitch);
}

/* ---- 章 ---- */
.mock-page--v p.sp-chapter {
  padding-block-start: var(--gap-chapter);
  font-size: 1.35em;
  font-weight: 800;
  text-align: start;
}

.mock-page--v p.sp-chapter .sp-chapter__no {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}

/* ---- 柱 ---- */
.mock-page--v p.sp-scene {
  position: relative;
  padding-block-start: var(--gap-scene);
  font-family: var(--font-gothic);
  font-weight: 600;
  text-align: start;
  /* 「│」を縦書き用グリフに差し替えさせない（アプリ側と同じ対策） */
  font-feature-settings: "vert" 0, "vrt2" 0;
}

/* 柱の列を囲う枠。番号帯の上端から本文の下端まで。
   絶対配置の top/right/bottom/left は縦書きでも物理方向のままなので、
   段落の padding（＝右側の空き）ぶんだけ内側へ寄せて列に重ねる。 */
.mock-page--v p.sp-scene::before {
  content: "";
  position: absolute;
  top: calc(-1 * (var(--v-num-h) + var(--v-rule-gap)));
  bottom: 0;
  right: calc(var(--gap-scene) - var(--v-box-pad));
  left: calc(-1 * var(--v-box-pad));
  border: var(--v-rule-w) solid var(--m-page-text);
  pointer-events: none;
}

/* 罫線の上に出るシーン番号（数字だけ横書きに戻す） */
.mock-page--v p.sp-scene .sp-scene__no {
  position: absolute;
  top: calc(-1 * (var(--v-num-h) + var(--v-rule-gap)));
  height: var(--v-num-h);
  right: var(--gap-scene);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: horizontal-tb;
  font-family: var(--font-gothic);
  font-size: calc(var(--vfs) * 1.15);
  line-height: 1;
  color: var(--m-scene-number);
}

/* ---- ト書き（全列とも頭を3字ぶん下げる） ---- */
.mock-page--v p.sp-action {
  padding-block-start: var(--gap-action);
  padding-inline-start: 3em;
}

/* ---- 人物＋セリフ ----
   人物名は列の上4字ぶんの帯、セリフは6字目から。 */
.mock-page--v p.sp-vspeech {
  position: relative;
  padding-block-start: var(--gap-speech);
  padding-inline-start: 5.5em; /* 名前4字 + 空き1字 + かぎ括弧の調整0.5字 */
  text-indent: -0.5em;
}

.mock-page--v p.sp-vspeech .sp-vspeech__speaker {
  position: absolute;
  inset-inline-start: 0; /* 縦書きでは「上」 */
  inset-block-start: var(--gap-speech); /* 縦書きでは「右」 */
  inline-size: 4em; /* 名前4字ぶんの高さ */
  writing-mode: vertical-rl;
  text-indent: 0;
  font-weight: 400;
}

/* ---- 転換（IN＝列の上寄せ／OUT＝列の下寄せ） ---- */
.mock-page--v p.sp-transition-in,
.mock-page--v p.sp-transition-out {
  padding-block-start: var(--gap-transition);
  font-weight: 400;
}

.mock-page--v p.sp-transition-in {
  text-align: start;
}

.mock-page--v p.sp-transition-out {
  text-align: end;
}

/* ---- ページ番号（用紙全体の中央） ---- */
.mock-page--v .mock-page__no {
  left: 0;
  right: 0;
  bottom: calc(6 * var(--u));
  font-family: var(--font-mincho);
  font-size: calc(var(--vfs) * 0.62);
}

/* ============================================================
   8) フッター（保存状況・ズーム）
   ------------------------------------------------------------
   左は保存状況だけ。文字数などは出さない（アプリ本体と同じ）。
   ============================================================ */
.mock__footer {
  flex: 0 0 var(--footer-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: var(--m-app-bg);
  border-top: 1px solid var(--m-border);
}

.mock__save {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1;
  color: var(--m-accent);
}

/* 保存済み＝アクセント色で塗りつぶした丸 */
.mock__save i {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--m-accent);
  border: 3px solid var(--m-accent);
}

.mock__zoom {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mock__zoombtn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  border: 1px solid var(--m-border);
  background: var(--m-surface);
  font-size: 14px;
  line-height: 1;
  color: var(--m-text);
}

/* ズームのスライダー（見た目だけ） */
.mock__zoombar {
  position: relative;
  width: 110px;
  height: 4px;
  border-radius: 2px;
  background: var(--m-border);
  margin: 0 2px;
}

.mock__zoombar i {
  position: absolute;
  top: 50%;
  /* つまみの位置は JS が --thumb-x に入れる（10%〜600%を0〜1に直した値） */
  left: calc(var(--thumb-x, 0.152) * 100%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--m-accent);
  transform: translate(-50%, -50%);
}

.mock__zoomreset {
  min-width: 46px;
  padding: 2px 6px;
  text-align: center;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--m-text);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   9) アプリ再現ブロックの周りの装飾
   ============================================================ */
.showcase {
  position: relative;
  padding-bottom: var(--sp-section);
}

/* 画面の下に敷く、うっすらとした床の影 */
.showcase__floor {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-section) - 40px);
  width: min(1100px, 92vw);
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(26, 70, 97, 0.16) 0%,
    rgba(26, 70, 97, 0) 70%
  );
  pointer-events: none;
  z-index: -1;
}

/* 画面の下に並べる、いま起きていることの説明 */
.showcase__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-8);
  margin-top: var(--sp-10);
}

.showcase__legend li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.showcase__legend svg {
  width: 15px;
  height: 15px;
  color: var(--c-accent);
  flex: 0 0 auto;
}

/* ============================================================
   10) 狭い画面での扱い
   ------------------------------------------------------------
   幅なりに縮めると原稿の文字がつぶれてしまうので、
   一定の倍率（app-mock.js の MIN_SCALE）より下は縮めずに、
   この枠の中だけ横スクロールさせて読めるようにする。
   ページ全体が横に伸びることはない。
   ============================================================ */
@media (max-width: 1000px) {
  .mock-stage {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; /* 影が切り落とされないぶんの逃げ */
    scrollbar-width: thin;
  }

  .mock {
    box-shadow: 0 2px 4px rgba(11, 23, 31, 0.05),
      0 12px 26px -8px rgba(11, 23, 31, 0.2);
  }
}

.showcase__zoomhint {
  display: none;
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}

.showcase__zoomhint::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5 3 12l5 7M16 5l5 7-5 7'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5 3 12l5 7M16 5l5 7-5 7'/%3E%3C/svg%3E")
    no-repeat center / contain;
}

/* 横スクロールが必要になったときだけ JS が .is-scrollable を付ける */
.showcase.is-scrollable .showcase__zoomhint {
  display: block;
}