* { box-sizing: border-box; }
/* ── templex.jp から実測したデザイントークン（2026-09-10、templex.jp風のリデザインで導入） ──
   グレースケールのみ（アクセントカラー無し）。本アプリの黒/青/赤の3色は
   注釈の種別を表す機能色なので維持し、装飾用の赤（ホバー・フォーカス枠）だけ無彩色に寄せる。 */
:root {
  /* 2026-09-12、目の疲れ対策で白地(#fff)から薄いクールグレーへ変更。テキストも純黒から少し
     和らげた（黒/青/赤の注釈機能色は別途ハードコードされておりここには連動しない）。 */
  --tx-text: #1e2126;
  --tx-muted: #4d4d4d;
  --tx-muted-2: #71717a;
  --tx-border: #e5e5e5;
  --tx-bg-muted: #f2f2f2;
  --tx-radius-card: 14px;
  --tx-radius-btn: 8px;
  --tx-shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --tx-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --tx-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --tx-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
}
body {
  margin: 0; color: var(--tx-text); background: #f4f5f7; padding: 28px 40px 100px;
  font-family: "Source Sans Pro", system-ui, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  overflow-x: hidden;   /* .heroの100vwフルブリード対策（スクロールバー分のはみ出しを隠す） */
}

/* ============================================================
   トップのヒーロー（2026-09-10新設）。templex.jpの構成を踏襲。
   左＝バッジ＋見出し＋説明文＋ボタン1つ（使い方はhelp.htmlという別ドキュメントに分離）。
   右＝アプリのイメージ図（ブラウザ枠）＋その下に派生アプリ3枚。
   ============================================================ */
/* heroはbodyのpaddingの外まで全幅で塗る（フルブリード）。bodyのpadding値に依存しない
   100vw基準の方式にする（スマホでbodyのpaddingだけ縮めても崩れないように）。
   中身は.hero-innerで揃える。 */
.hero {
  width: 100vw; position: relative; left: 50%; margin: -28px 0 0 -50vw;
  padding: 72px 40px 48px; background: #eef0f3;
  border-bottom: 1px solid var(--tx-border);
}
.hero-inner {
  max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start;
}
.hero-badge {
  display: inline-block; font-size: 12px; font-weight: 500; color: var(--tx-text);
  border: 1px solid var(--tx-border); border-radius: 999px; padding: 4px 14px; margin-bottom: 20px;
  background: #fff;
}
.hero-title {
  font-size: 38px; font-weight: 700; line-height: 1.28; letter-spacing: -.5px;
  margin: 0 0 18px; color: var(--tx-text);
}
/* 説明文は短い1文（版名＋一言）。見出し38pxに対して小さく見えないよう22pxまで上げ、
   幅を18emに絞って2〜3行に落として塊として読ませる。 */
.hero-desc { font-size: 22px; line-height: 1.7; color: var(--tx-muted); margin: 0 0 28px; max-width: 18em; }
.hero-cta { display: inline-flex; }
/* 「使い方を読む」の下に置くショートカット一覧（2026-09-13、ツールバー直上から移設）。
   小さい太字ラベル＋淡色の中身、という見せ方にする。 */
.hero-shortcuts { margin-top: 20px; }
.hero-shortcuts-title { font-size: 12px; font-weight: 600; color: var(--tx-muted-2); margin-bottom: 6px; }
.hero-shortcuts ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.9; color: var(--tx-muted); }
.hero-shortcuts li::before { content: "・"; }

/* ── アプリのイメージ図（ブラウザ枠） ── */
.browser-mock {
  border: 1px solid var(--tx-border); border-radius: var(--tx-radius-card); overflow: hidden;
  background: #fff; box-shadow: var(--tx-shadow-2xl);
}
.browser-mock-bar {
  height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px;
  background: #f3f3f3; border-bottom: 1px solid var(--tx-border);
}
.browser-mock-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-red { background: #ff5f57; } .dot-yellow { background: #ffbd2e; } .dot-green { background: #28c840; }
.browser-mock-url {
  margin-left: 10px; font-size: 11.5px; color: var(--tx-muted-2); background: #fff;
  border: 1px solid var(--tx-border); border-radius: 999px; padding: 3px 12px; flex: 1 1 auto;
}
.browser-mock-body { background: var(--tx-bg-muted); padding: 22px; }
.mock-paper {
  background: #fff; border: 1px solid var(--tx-border); border-radius: 10px; box-shadow: var(--tx-shadow-sm);
  padding: 22px; display: flex; gap: 18px;
}
.mock-doc { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11px; }
.mock-line { height: 9px; border-radius: 5px; background: #eceef1; }
.mock-line-noted { display: flex; align-items: center; gap: 4px; }
.mock-line-inline { height: 9px; border-radius: 5px; background: #eceef1; display: inline-block; }
.mock-note-num { font-size: 10px; font-weight: 700; color: #ff4b4b; }
.mock-side { width: 84px; flex: none; display: flex; flex-direction: column; gap: 18px; padding-top: 2px; }
.mock-note { display: flex; align-items: flex-start; gap: 4px; }
.mock-note-text { flex: 1 1 auto; height: 16px; border-radius: 4px; background: #eceef1; }
.mock-note-important .mock-note-text { background: rgba(255,75,75,.18); }
/* このアプリ固有の追加パーツ：見出し・箇条書き・コードブロックでMarkdownらしさを出す。 */
.mock-h { height: 11px; border-radius: 4px; background: #d7dade; }
.mock-bullet { display: flex; align-items: center; gap: 6px; }
.mock-dot { width: 4px; height: 4px; border-radius: 50%; background: #b9bdc5; flex: none; }
.mock-code { height: 26px; border-radius: 6px; background: #f0f1f3; border-left: 3px solid #d7dade; }

/* ── ボタン共通（templexの黒塗り/白抜き2種） ── */
.btn-outline, .btn-primary {
  font-size: 14px; height: 40px; padding: 0 16px; border-radius: var(--tx-radius-btn);
  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; text-decoration: none; white-space: nowrap;
}
.btn-outline { background: #fff; color: var(--tx-text); border: 1px solid var(--tx-border); }
.btn-outline:hover { background: #f4f4f5; }
.btn-primary { background: var(--tx-text); color: #fff; border: 1px solid var(--tx-text); }
.btn-primary:hover { background: #262626; }
.btn-outline:disabled, .btn-outline[disabled] { background: #f5f6f8; color: #b7bac2; border-color: #eee; cursor: not-allowed; }
/* ツールバーのボタンはラベルの長さに関わらず幅を揃える（旧デザインの踏襲）。
   幅は最長ラベル「続きから再開」に合わせる。6個×118px+gap8pxで900px幅に収まる。 */
.toolbar .btn-outline, .toolbar .btn-primary, .toolbar .filebtn2 { width: 118px; }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-title { font-size: 30px; }
}
/* スマホは左右の余白を詰める（PC基準の40px×2は画面の1/4近くを占めて狭く見えるため）。
   .toolbar-sticky/.title-row/.doc-wrap等は自前の左右paddingを持たずbodyの余白に
   乗っているだけなので、ここを縮めるだけで全体が揃って詰まる。.heroは100vw基準なので影響を受けず、
   自分自身のpadding（下の宣言）だけ別途縮める。 */
@media (max-width: 600px) {
  body { padding-left: 16px; padding-right: 16px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .theme-grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

/* 共通の118pxだと900px幅に収まらず折り返すため、最長ラベル「続きから再開」が入る範囲で
   少しだけ詰める（新しい作業/続きから再開/開く/.json/.md/.pdfの6個＋右端の固定チェックボックス
   2つが900px内に収まる幅。設定・デザインは2026-09にこの行から移設・廃止済み）。 */
.toolbar .btn-outline, .toolbar .btn-primary, .toolbar .filebtn2 { width: 104px; }

/* 文章が長くなるとボタンに手が届かなくなるため、上段（ファイル操作）・下段（書式）は
   それぞれ独立に画面上部へ固定できる（ツールバー右の「上段メニュー固定」「下段メニュー固定」
   チェックボックス、app.js参照）。
   position:stickyは「自分の親要素」の高さの範囲でしか固定され続けない。上段・下段の2行を
   1つの短い.toolbar-stickyにまとめてそこへposition:stickyを付けると、そのすぐ下（親の外）まで
   スクロールした瞬間に固定が解けてしまう（2026-09に発生させた不具合）。そのため上段・下段を
   別々の.toolbar-sticky（ともにbody直下＝ページ全体ぶんの高さがある親）に分け、.menu-stickyが
   付いた側だけposition:stickyにする。下段が固定の時は上段の高さぶんだけ下にずらして重ならない
   ようにする（上段が非固定の場合はその分の余白が浮くが、両方固定/両方非固定が主な使い方なので
   許容する）。 */
.toolbar-sticky {
  max-width: 900px; margin: 0 auto 16px; padding-top: 48px;
}
/* 下段側の.toolbar-stickyは上段の直後に隙間なく続けたいので、上段用のpadding-top(48px)を
   打ち消す（本来はヒーロー直後の1回だけでよい余白のため）。 */
.toolbar-sticky--menu2 { padding-top: 0; margin-top: -16px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; background: #f4f5f7; }
#toolbarMenu1Wrap.menu-sticky { position: sticky; top: 8px; z-index: 20; background: #f4f5f7; }
/* 96px = 上段の固定オフセット8px + 実際の高さ88px（padding-top:48pxを含む）。この値がズレると
   下段が上段の裏に隠れて見えなくなる（2026-09に実際に発生した不具合）。 */
#toolbarMenu2Wrap.menu-sticky { position: sticky; top: 96px; z-index: 19; background: #f4f5f7; }
/* ボタン列の右端に置く（設定ボタンを廃止した分の余白に収まる）。margin-left:autoで押し出すため、
   折り返した場合はそのラインの右端に来る。 */
.menu-pin-toggles { display: flex; gap: 8px; margin-left: auto; }
.menu-pin-toggle {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--tx-muted-2); cursor: pointer;
  white-space: nowrap;
}
.menu-pin-toggle input { flex: none; }

/* ツールバーのボタンはtitle属性（ブラウザ標準の吹き出し＝枠線と影で囲まれ、見た目を制御できない）
   をやめ、data-tip属性＋この自前ツールチップに置き換える。枠線も影も付けず、
   濃い背景色のコントラストだけで浮かせる（2026-09-12、囲まれるのが好みでないという指摘を受けて変更）。 */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: 60; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: 240px; text-align: left;
  background: #31333f; color: #fff; font-size: 12px; line-height: 1.6; padding: 8px 10px; border-radius: 8px;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
/* ボタンの見た目は.btn-outline/.btn-primary（本体と共通）へ統一。ここはレイアウトのみ。 */
.icon { width: 1.05em; height: 1.05em; flex: none; }   /* Bootstrap Icons（MITライセンス）のSVGを絵文字の代わりに使う */
.toolbar .filebtn2 input { display: none; }
.toolbar .sep { width: 1px; height: 22px; background: var(--tx-border); margin: 0 2px; }

/* タイトル欄はツールバーから独立させ、全幅の1行ボックスにする（テキストの主役として目立たせる）。 */
.title-row { max-width: 900px; margin: 24px auto 0; }
.title-label { font-size: 12.5px; color: var(--tx-muted-2); margin: 0 0 6px; }
.title-row input[type="text"] {
  width: 100%; height: 44px; padding: 0 14px; border-radius: var(--tx-radius-btn); border: 1px solid var(--tx-border);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--tx-text);
}
.title-row input[type="text"]:focus { outline: none; border-color: var(--tx-text); box-shadow: 0 0 0 3px rgba(10,10,10,.08); }
.opened-file-note { font-size: 12.5px; color: var(--tx-muted-2); margin-top: 6px; }
#saveStatus { max-width: 900px; margin: 8px auto 0; font-size: 12.5px; color: #666; min-height: 1.4em; }

.app-footer { max-width: 900px; margin: 48px auto 0; text-align: left; font-size: 11px; color: var(--tx-muted-2); }

/* ── 「設定」「デザイン」のドロップダウンパネル ──
   note-popoverと同じ考え方（枠線ではなく影だけで境界を示す）を踏襲。 */
.dropdown-panel {
  position: absolute; z-index: 55; width: 280px; background: #fff; border: none;
  border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.18); padding: 14px 16px;
  font-size: 13px; line-height: 1.7; color: #444;
}
.dropdown-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dropdown-panel-title { font-size: 13.5px; font-weight: 700; color: #31333f; }
.dropdown-close {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; flex: none;
  background: #eef0f3; color: #31333f; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dropdown-close:hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.dropdown-close .icon { width: 12px; height: 12px; }
.settings-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.settings-row:last-child { margin-bottom: 0; }

/* ── デザイン：ヒーロー内に常時表示するグリッド（当初のアプリイメージ通り、ドロップダウンでは
   ない。ボタンは名前のみ・4列×2行。2026-09、設定パネルから移設）── */
.hero-theme-section { margin-top: 28px; }
.hero-theme-title { font-size: 16px; font-weight: 700; color: var(--tx-text); margin-bottom: 12px; }
.theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 460px; }
/* グレー地＋影で「押せるボタン」らしい立体感を出す（2026-09、白地の枠線だけだと
   ボタンに見えないという指摘を受けて変更）。選択中は.btn-primaryと同じ黒地・白文字に反転させ、
   今どのデザインを選んでいるか一目で分かるようにする。 */
.theme-swatch {
  height: 40px; border: 1px solid var(--tx-border); background: var(--tx-bg-muted); border-radius: var(--tx-radius-btn);
  font-size: 13px; font-weight: 500; color: var(--tx-text); cursor: pointer; text-align: center;
  box-shadow: var(--tx-shadow-sm); transition: box-shadow .15s, background .15s;
}
.theme-swatch:hover { background: #e8e8ea; box-shadow: var(--tx-shadow-md); }
.theme-swatch.selected {
  background: var(--tx-text); color: #fff; border-color: var(--tx-text); font-weight: 700;
}


/* ファイル名→本文の間の余白は#saveStatus（margin-top 8px + min-height 1.4em）が担っている
   （#saveStatusを一時的にヒーロー側へ移していた間だけ、ここにもmargin-topが必要だった）。 */
.doc-wrap { display: flex; gap: 28px; max-width: 900px; margin: 0 auto; }
.doc-left { flex: 1 1 auto; min-width: 0; position: relative; }   /* 段落ホバー時のアイコン(.para-hover)の位置基準 */
.doc-label { font-size: 12.5px; color: #8a8f98; margin: 0 0 6px; }
.doc-right-col { width: 260px; flex: none; }   /* 区切りは罫線ではなくgap（余白）だけに任せる */
.doc-right { position: relative; font-family: var(--font-body); }
/* サイドノート欄の上部に常時表示する「自分／共有相手／重要」の名前表示チェックボックス
   （2026-09、設定パネルから移設）。チロム（アプリ側UI）扱いなのでテーマの対象外にする。 */
.doc-right-labels { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.label-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tx-muted-2); cursor: pointer; }
.label-toggle input { flex: none; }
.label-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.label-toggle[data-color="black"] .label-dot { background: #31333f; }
.label-toggle[data-color="blue"] .label-dot { background: #1a73e8; }
.label-toggle[data-color="red"] .label-dot { background: #d33; }

/* ドラッグ＆ドロップでMarkdownファイルを開く時の目印。 */
.doc-left.drag-over #doc { outline: 2px dashed var(--accent); outline-offset: 4px; }

/* #docと見本(#docSample)を同じマス目に重ねて表示する（絶対座標の手計算をせずに済むCSS Gridの技）。 */
.doc-stack { display: grid; }
.doc-stack > * { grid-area: 1 / 1; }
/* [hidden]とdisplay:gridが同じ詳細度になり後勝ちでgridが表示してしまうのを防ぐ（.para-hover[hidden]と
   同じ理由・同じ対策。pdfモードでdocStackEl.hidden=trueにしてもこれが無いと本文の見本が透けて残る。
   sidenote-pdf-docから移植）。 */
.doc-stack[hidden] { display: none; }

/* ==================================================================
   ここから下（#doc・.para各種・.sidenote-*・印刷）は「デザイン（テーマ）」の対象。
   色・フォントはCSS変数（--paper/--ink/--muted/--accent/--rule/--surface/--radius/--font-*）
   経由で参照し、実際の値はthemes.cssのhtml[data-theme="..."]側で定義する。
   ツールバー等のチロムは意図的にこの変数を使わない（常に上のニュートラルな見た目のまま）。
   ================================================================== */

#doc {
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px;
  font-size: 15px; line-height: 2; min-height: 300px;
  background: var(--paper); color: var(--ink); font-family: var(--font-body);
}
#doc:focus { outline: none; }
/* ノート追加ポップオーバー表示中は#docからフォーカスが外れ、ブラウザ標準の選択ハイライトが
   消えてしまう（＝今どのテキストにコピー・切り取り・削除が効くのか見えなくなる）ため、
   CSS Custom Highlight API（app.jsのsetPendingHighlight）でDOM構造に触れずに同じ見た目を重ねる。
   Highlight/HighlightTextはOSネイティブの選択色に自動追従するシステムカラーキーワード。
   対応ブラウザのみ（非対応でも機能自体は変わらず、見た目が付かないだけ）。 */
::highlight(sidenote-pending) { background-color: Highlight; color: HighlightText; }
/* 本文が空の間だけ、それらしい案内をグレーで重ねて見せる（#docのJS側で.emptyを付け外しする）。
   クリックは下の#docへ素通しし、実際に何か取り込んだ瞬間にJS側で消える。 */
#docSample {
  display: none; padding: 28px; font-size: 15px; line-height: 2;
  color: var(--muted); font-family: var(--font-body); pointer-events: none;
}
#doc.empty ~ #docSample { display: block; }

.para { margin: 0; }   /* テキスト段落＝1行ぶんの単位 */
/* 段落と段落の間は、この一定の余白だけで区切る（以前はMarkdown取り込み時に空行ぶんの空段落を
   自動で挟んでいたが、Enterで改行していない箇所まで間延びして見えるという指摘を受けて廃止した。
   2026-09）。これ以上の余白が欲しい時はユーザーが実際に空行（Enter）を打てば、その空段落の
   高さぶんが上乗せされる。リスト項目（.para-li）同士は詰めて表示したいので対象外にする。 */
.para:not(.para-opaque):not(.para-li) { margin-bottom: .6em; }
.para:last-child { margin-bottom: 0; }
/* 本文の1行を常時37字以内にする。CJKフォントは全角1文字がほぼ1em幅で設計されているため、
   max-width:37emで近似する（画像・表・水平線＝.para-opaqueは対象外）。 */
.para:not(.para-opaque) { max-width: 37em; }

.note-anchor { cursor: default; }   /* ハイライト（マーキング）は無し。注釈の目印は先頭の番号だけ */
.note-num {
  font-size: .65em; font-weight: 700; margin-right: 2px; color: var(--accent); vertical-align: super;
  user-select: none;
}

/* ── 見出し・引用・コードブロック・リスト項目 ── */
.para-h1, .para-h2, .para-h3, .para-h4, .para-h5, .para-h6 { font-family: var(--font-head); text-wrap: balance; }
.para-h1 { font-weight: 700; font-size: 1.6em; line-height: 1.4; margin-top: .2em; }
.para-h2 { font-weight: 700; font-size: 1.32em; line-height: 1.4; margin-top: 1.1em; }
.para-h3 { font-weight: 600; font-size: 1.1em; line-height: 1.5; margin-top: .9em; }
.para-h4, .para-h5, .para-h6 { font-weight: 600; font-size: 1em; line-height: 1.6; margin-top: .8em; }

.para-quote { border-left: 3px solid var(--accent); padding-left: 1em; color: var(--ink); }

/* 本文中のリンクは各テーマのアクセント色に合わせる（ブラウザ既定の青はダークテーマ等で視認性が低いため）。 */
.para a, .sidenote-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.para a:visited, .sidenote-text a:visited { color: var(--accent); }

.para-code {
  font-family: var(--font-mono); font-size: .85em; line-height: 1.6; white-space: pre-wrap;
  background: var(--surface); border-radius: var(--radius); padding: .8em 1em;
}

.para-li { padding-left: 1em; text-indent: -1em; }
.para-li[data-indent-level="1"] { padding-left: 2em; }
.para-li[data-indent-level="2"] { padding-left: 3em; }
.li-marker { color: var(--muted); user-select: none; }

/* ── 段落ホバー時の「＋画像」「×削除」（JIMDO的なブロック単位の操作） ──
   #docの外側の要素なので、位置は.doc-left基準の絶対座標（JSがtopだけ合わせる）。 */
.para-hover {
  position: absolute; left: 100%; margin-left: 4px; top: 0; padding: 4px;
  display: flex; flex-direction: column; gap: 4px; z-index: 15;
}
.para-hover[hidden] { display: none; }
.para-hover-btn {
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 7px;
  background: #eef0f3; color: #31333f; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.para-hover-btn:hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.para-hover-btn .icon { width: 14px; height: 14px; }
.para-hover input[type="file"] { display: none; }

/* ── 画像ブロック（スクショ・MD内の画像） ──
   罫線ではなく淡い背景で「1つのブロック」を示す。ここは本文の一部なのでテーマに合わせて色を変える。 */
.para-image { margin: 16px 0; padding: 12px; border-radius: var(--radius); background: var(--surface); }
.para-image-inner { display: flex; flex-direction: column; gap: 8px; }
.para-image-img { max-width: 100%; display: block; border-radius: 6px; }
.para-image-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* メタボタン（＋ノート／×削除）はチロムと同じ扱い＝テーマに関わらず常にこの色。 */
.para-image-note-btn {
  font-size: 12.5px; padding: 5px 10px; border-radius: 6px; border: none;
  background: #eef0f3; color: #31333f; cursor: pointer;
}
.para-image-note-btn:hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.para-image-del-btn {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: #eef0f3; color: #31333f; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.para-image-del-btn:hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.para-image-del-btn .icon { width: 12px; height: 12px; }
.para-image-notes:not(:empty) { display: flex; gap: 6px; margin-bottom: 4px; }

/* ── 表ブロック（Markdownの表） ── */
.para-table { margin: 16px 0; }
.para-table-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.para-table-note-btn {
  font-size: 12.5px; padding: 5px 10px; border-radius: 6px; border: none;
  background: #eef0f3; color: #31333f; cursor: pointer;
}
.para-table-note-btn:hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.para-table-del-btn {
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: #eef0f3; color: #31333f; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.para-table-del-btn:hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.para-table-del-btn .icon { width: 12px; height: 12px; }
.para-table-notes:not(:empty) { display: flex; gap: 6px; margin-bottom: 4px; }
.para-table-el { width: 100%; border-collapse: collapse; font-size: .92em; }
.para-table-el th, .para-table-el td { padding: .55em .75em; border-bottom: 1px solid var(--rule); text-align: left; }
.para-table-el th { color: var(--muted); font-weight: 600; background: var(--surface); }

/* ── 水平線ブロック（Markdownの --- 区切り線） ── */
.para-hr { position: relative; margin: 1.6em 0; }
.para-hr hr { border: none; border-top: 1px solid var(--rule); margin: 0; }
.para-hr-del-btn {
  position: absolute; right: -34px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: #eef0f3; color: #31333f; cursor: pointer; opacity: 0; transition: opacity .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.para-hr:hover .para-hr-del-btn { opacity: 1; }
.para-hr-del-btn:hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.para-hr-del-btn .icon { width: 12px; height: 12px; }

/* 1つの注釈対象（一文・画像・表）に複数のコメント（自分・共有相手の返信）が並ぶことがあるため、
   カード全体で1つの通し番号を持ち、その中に複数行（.sidenote-entry）を積む構成にする。 */
.sidenote-card {
  position: absolute; left: 20px; right: 0; font-size: 13px; line-height: 1.7; color: var(--ink);
}
.sidenote-num { color: var(--muted); font-weight: 700; margin-right: 4px; }   /* 番号は無彩色に統一（赤は「重要」専用の色にするため） */
.sidenote-entry { display: flex; align-items: flex-start; gap: 4px; margin-top: 2px; }
.sidenote-entry:first-of-type { margin-top: 0; }
/* pre-lineだと改行(\n)を連続させても1つに畳まれてしまい、Enterを2回押しても
   空行が入らなかった（2026-09-13指摘）。pre-wrapなら連続した改行もそのまま保持しつつ折り返す。 */
.sidenote-text { white-space: pre-wrap; flex: 1 1 auto; }   /* ノート本文の改行(\n)を保持する（太字の見出し行→本文、のような2行構成のため） */
.sidenote-text strong { color: inherit; }
.sidenote-rm {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none;
  border: none; background: none; color: #b7bac2; cursor: pointer; padding: 0; margin-left: 4px;
}
.sidenote-rm:hover { color: var(--tx-text); }
.sidenote-rm .icon { width: 10px; height: 10px; }
.sidenote-reply-btn {
  display: block; font-size: 11.5px; padding: 3px 0; margin-top: 4px; border: none; background: none;
  color: var(--muted); cursor: pointer;
}
.sidenote-reply-btn:hover { color: var(--tx-text); }

/* 注釈が1件も無い間だけ出す、使い方のグレーアウトの見本（実際のノートを1件付けると消える）。 */
.sidenote-sample { color: #b7bac2; pointer-events: none; }
.sidenote-sample .sidenote-num { color: #c7cad0; }

.note-popover {
  position: absolute; z-index: 50; width: 260px; background: #fff; border: none;
  border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.18); padding: 10px;
}
.color-picker { display: flex; gap: 6px; margin-bottom: 8px; }
.color-swatch {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11.5px; padding: 5px 4px; border-radius: 6px; border: none;
  background: #f5f6f8; color: #8a8f98; cursor: pointer;
}
.color-swatch::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.color-swatch[data-color="black"] { color: #31333f; }
.color-swatch[data-color="blue"] { color: #1a73e8; }
.color-swatch[data-color="red"] { color: #d33; }
.color-swatch.selected { background: #e2e4e9; font-weight: 600; }
.note-popover textarea {
  width: 100%; font-size: 13px; font-family: inherit; border: 1px solid #e2e4e9; border-radius: 6px;
  padding: 8px; resize: vertical;
}
.note-popover textarea:focus { outline: none; border-color: var(--tx-text); }
.note-popover .phint { font-size: 11px; color: #8a8f98; margin-top: 4px; }
.note-popover .row { display: flex; gap: 8px; margin-top: 8px; }
.note-popover button {
  flex: 1 1 0; font-size: 13px; padding: 7px; border-radius: 6px; border: none;
  background: #eef0f3; color: #31333f; cursor: pointer;
}
.note-popover button:not(.primary):hover { background: var(--tx-bg-muted); color: var(--tx-text); }
.note-popover button.primary { background: var(--tx-text); color: #fff; font-weight: 600; }

@media (max-width: 860px) {
  .doc-wrap { flex-direction: column; }
  .doc-right-col { display: none; }   /* スマホ幅ではサイドノート欄自体を非表示にする（横並びの余白が無いため） */
  .para-hover { left: auto; right: 4px; margin-left: 0; }
}

/* ── 印刷（PDF保存）専用の版面 ──
   画面のサイドノートはJSで実測した絶対座標で配置しているが、印刷はページをまたぐため使えない。
   代わりにJupyter Book（sphinx-book-theme）と同じ「float」方式にする：
   段落はfloat:leftで固定幅の左カラムに、注釈(aside)はfloat:rightで右カラムに、
   隣り合う兄弟要素として並べる（asideを段落の中に入れない＝段落の最大幅に押し込められて
   独立したカラムにならないため）。段落側はclear:leftで必ず新しい行から始める。
   印刷は画面のデザイン（テーマ）と違い、常に読みやすい単色（白地に黒）で出す（ダークテーマの
   まま印刷すると用紙を無駄にするため）。フォントと差し色（--p-*）だけテーマに応じて変える。 */
#printDoc { display: none; }

@page {
  size: A4;
  margin: 20mm;
}

/* bodyの背景色（2026-09-12〜薄いクールグレー）が印刷に紛れ込まないよう、印刷時は常に白へ戻す
   （通常はブラウザが背景色を印刷しない既定動作に守られるが、「背景のグラフィック」が有効な環境でも
   確実に白地になるよう明示しておく）。 */
body.print-active { padding: 0; margin: 0; background: #fff; }
body.print-active .hero, body.print-active .toolbar-sticky, body.print-active .title-row,
body.print-active #saveStatus, body.print-active .doc-wrap, body.print-active .note-popover,
body.print-active .dropdown-panel, body.print-active .app-footer { display: none !important; }
body.print-active #printDoc {
  display: block !important;
  font-family: var(--p-font-body, "Source Sans Pro", system-ui, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif);
  font-size: 10.5pt; line-height: 1.9; color: #000;
}
body.print-active #printDoc::after { content: ""; display: block; clear: both; }
body.print-active .print-title {
  font-family: var(--p-font-head, inherit); font-size: 14pt; font-weight: 700; margin: 0 0 16pt; clear: both;
}
/* 段落・見出し・引用・コードはfloatさせず、幅115mmの通常のブロックとして縦に積む（＝本文は自然な
   折り返し以外では絶対に改行されない）。サイドノートは対応する一文の直後としてインラインで埋め込み
   （buildPrintNode参照）、.print-asideのfloat:right＋マイナスマージンで段落の右の余白へ逃がす
   （Tufte CSSとして知られる余白注釈の定番手法）。
   marginは段落間の一定の余白（画面側の.para margin-bottom:.6emと同じ考え方。2026-09、
   Markdown取り込み時に空行ぶんの空段落＝spacerを自動で挟む方式をやめたのに合わせて変更）。
   clearは意図的に付けない：floatした.print-asideを子に持つブロックにclearを付けると、そのasideが
   「まだ隣にfloatが残っている」扱いになり、次のブロックがそのasideの下まで律儀に待ってしまう
   （＝段落の長い注釈のぶんだけ余白が空いて見える不具合の原因）。見出し・引用・コードもこの段落と
   同じ理由でclearを付けない（同じくfloatしたasideを子に持ちうるため）。 */
body.print-active .print-para,
body.print-active .print-h1, body.print-active .print-h2, body.print-active .print-h3,
body.print-active .print-h4, body.print-active .print-h5, body.print-active .print-h6,
body.print-active .print-quote, body.print-active .print-code {
  width: 115mm; margin: 0 0 .6em; overflow-wrap: break-word;
}
/* リスト項目同士は画面（.para:not(.para-li)の余白から除外）と同じく詰める。 */
body.print-active .print-li { margin-bottom: 0; }
body.print-active .print-h1, body.print-active .print-h2, body.print-active .print-h3,
body.print-active .print-h4, body.print-active .print-h5, body.print-active .print-h6 {
  font-family: var(--p-font-head, inherit); font-weight: 700;
}
body.print-active .print-h1 { font-size: 14.5pt; }
body.print-active .print-h2 { font-size: 12.5pt; }
body.print-active .print-h3 { font-size: 11pt; }
body.print-active .print-h4, body.print-active .print-h5, body.print-active .print-h6 { font-size: 10.5pt; }
body.print-active .print-quote {
  border-left: 1.5pt solid var(--p-accent, #ff4b4b); padding-left: 8pt; font-family: var(--p-font-body, inherit);
}
body.print-active .print-code {
  font-family: "Courier New", monospace; font-size: 9pt; white-space: pre-wrap; background: #f5f5f5; padding: 6pt 8pt;
}
/* あえてclearfix（floatの子=.print-asideの高さを親に含める処理）は入れない。入れると、注釈が
   その段落の本文より長い時、次の段落がその注釈の下まで律儀に空けて始まってしまい、段落ごとの
   余白が不揃いに広がって見える。本文（幅115mm）と注釈（幅48mm、外側の余白へマイナスマージンで
   逃げている）は横位置が重ならないため、本文同士がぶつかることは無い。
   残るリスクは「ある段落の長い注釈がまだ表示され続けている間に、次の段落の注釈がごく早い位置に
   来る」場合に注釈同士が重なる可能性があるが、これは比較的まれなケースとして許容する。 */
body.print-active .print-img { width: 115mm; max-width: 115mm; float: left; clear: both; margin: 0 0 10pt; display: block; }
body.print-active .print-table {
  width: 115mm; float: left; clear: both; margin: 0 0 10pt; border-collapse: collapse; font-size: 9pt;
}
body.print-active .print-table th, body.print-active .print-table td { padding: 4pt 6pt; border-bottom: .5pt solid #999; text-align: left; }
body.print-active .print-table th { font-weight: 700; }
body.print-active .print-hr { width: 115mm; float: left; clear: both; border: none; border-top: .5pt solid #999; margin: 10pt 0; }
body.print-active .print-aside {
  width: 48mm; float: right; clear: right; margin: 0 0 8pt; font-size: 8.5pt; line-height: 1.6; color: #333;
  /* 出典のURLのように区切りの無い長い文字列は、そのままだと48mmの枠からはみ出して印刷時に途中で切れる。
     本文（.print-para等）には overflow-wrap: break-word があるが、画像・表へのサイドノートは本文の
     中ではなく#printDoc直下に置かれるため（下のコメント参照）その指定を受け継がない。 */
  overflow-wrap: anywhere;
}
/* 段落の中にインラインで埋め込まれた場合だけ、段落自身の右の余白（外）へ逃がす。画像・表の直後に
   段落の外（#printDocの直接の子）として置かれる場合（画像・表への注釈）は今まで通りfloat:rightのみ。 */
body.print-active .print-para .print-aside,
body.print-active .print-h1 .print-aside, body.print-active .print-h2 .print-aside,
body.print-active .print-h3 .print-aside, body.print-active .print-h4 .print-aside,
body.print-active .print-h5 .print-aside, body.print-active .print-h6 .print-aside,
body.print-active .print-quote .print-aside { margin-right: -48mm; }
body.print-active #printDoc sup { font-size: .75em; color: #666; }
body.print-active #printDoc a { color: var(--p-accent, #ff4b4b); }

/* サイドノートが1件も無い文書（buildPrintDoc()がbodyに付ける.no-sidenoteクラス）は、右の48mm欄を
   使わないぶん本文を大きく・広く組む（12pt・1行37字＝画面表示と同じ文字数）。
   156.6mm = 37字 × 12pt（CJKフォントは全角1文字≒1emという画面側と同じ近似）。
   widthはemではなくこの固定mm値を使う：見出し・コードは本文と異なるfont-sizeを持つため、
   emのまま指定すると要素ごとに幅がバラついてしまう（本文と揃った1本の段組みにするため）。 */
body.print-active.no-sidenote #printDoc { font-size: 12pt; }
body.print-active.no-sidenote .print-para,
body.print-active.no-sidenote .print-h1, body.print-active.no-sidenote .print-h2,
body.print-active.no-sidenote .print-h3, body.print-active.no-sidenote .print-h4,
body.print-active.no-sidenote .print-h5, body.print-active.no-sidenote .print-h6,
body.print-active.no-sidenote .print-quote, body.print-active.no-sidenote .print-code,
body.print-active.no-sidenote .print-table, body.print-active.no-sidenote .print-hr {
  width: 156.6mm;
}
body.print-active.no-sidenote .print-img { width: 156.6mm; max-width: 156.6mm; }

/* ============================================================
   ここから下は sidenote-pdf（PDFに直接注釈）／sidenote-pdf-doc（書面レイアウト）を
   統合した際に移植したブロック（2026-09）。
   ============================================================ */

/* GIFはブラウザ操作の実演（音声なし）。カードのような枠を付けて、文章と地続きにならないようにする。
   help.html（使い方ページ）で使う。 */
.help-gif {
  display: block; width: 100%; max-width: 460px; margin: 10px 0 0; border-radius: 8px;
  border: 1px solid var(--tx-border); box-shadow: var(--tx-shadow-sm);
}

/* ── デザインパネル内の「カスタマイズ」だけ他のスウォッチと見た目を少し変え、
   （テーマではなく設定パネルを開く）別の操作であることを示す。 ── */
.theme-swatch-customize { border-style: dashed; }

/* ── 本文の書式ツールバー（配置／インデント／ぶら下げ／太字下線／傍点／スタイル） ──
   ファイル操作の.toolbarとは幅・並びの性格が違う（ラベルの長さがバラバラ）ため、
   固定幅は踏襲せず、ボタンごとに中身の幅に合わせる。 */
.toolbar-format { row-gap: 6px; }
/* pdfモードでは.toolbar-format自体をhidden属性で隠す（本文のformatToolbar経由の書式操作は
   PDFページには適用できないため）。.toolbarと同じ[hidden]詳細度同点の罠があるので明示的に潰す。 */
.toolbar-format[hidden] { display: none; }
/* ラベルとそのボタン群を1つの塊にする。分けたままだと折り返し（flex-wrap）の際に
   ラベルだけ前の行に残りボタンが次の行に落ちる、といった分離が起きるため。 */
.fmt-unit { display: inline-flex; align-items: center; gap: 6px; }
.fmt-group-label { font-size: 11.5px; color: var(--tx-muted-2); }
.fmt-group { display: inline-flex; align-items: center; gap: 4px; }
/* 見た目は.btn-outline（白地＋枠線）に揃え、寸法だけ小さくする。 */
.fmt-btn {
  font-size: 13px; height: 30px; min-width: 30px; padding: 0 8px; border-radius: var(--tx-radius-btn);
  border: 1px solid var(--tx-border); background: #fff; color: var(--tx-text); cursor: pointer;
}
/* #formatToolbarは.toolbarも併せ持つため、そちらの固定幅104px（.toolbar .btn-outline等）が
   同じ詳細度の.fmt-btnより後勝ちで効いてしまう。クラス2つ分の詳細度で明示的に打ち消す。 */
.toolbar-format .fmt-btn { width: auto; height: 30px; }
.fmt-btn:hover { background: #f4f4f5; }
.fmt-btn:disabled { background: #f5f6f8; color: #b7bac2; border-color: #eee; cursor: not-allowed; }
/* 選択中／適用中の状態は色を反転させて示す（.btn-primaryと同じ黒地・白文字）。 */
.fmt-btn.active { background: var(--tx-text); color: #fff; border-color: var(--tx-text); }
/* 配置／インデント／ぶら下げ／スタイルは、ラベルの字数（「左」1字〜「本文」2字）に関わらず
   全角2文字分の幅で揃える（列内でボタンの大きさがバラつかないようにするため）。 */
.fmt-btn-2ch { min-width: 40px; }
.fmt-btn-bold { font-weight: 700; }
.fmt-btn-underline { text-decoration: underline; }
.fmt-label { display: inline-block; min-width: 34px; font-size: 12.5px; color: var(--tx-text); text-align: center; }
.fmt-btn-kenten { letter-spacing: -1px; }   /* 「傍点」2文字がボタン内でやや間延びして見えるため少し詰める */

/* 傍点（強調の圏点）。execCommandに対応が無い書式のため独自のspan(.kenten)に持たせ、
   画面(#doc)・印刷(#printDoc)の両方に同じルールを当てる（印刷側の複製はbuildPrintNode参照）。
   横書きなので文字の上に付ける（over）。プレフィックス無しのtext-emphasis-*はChromeで対応済みだが、
   -webkit-プレフィックス版も念のため一緒に指定しておく。 */
.kenten {
  -webkit-text-emphasis-style: filled dot; -webkit-text-emphasis-position: over right;
  text-emphasis-style: filled dot; text-emphasis-position: over right;
}

/* ── 「項番設定」パネル（見出しH1〜H3の見た目／項番の型ごとのインデント・ぶら下げ） ──
   行に入力欄・セレクトが並ぶため、他のdropdown-panel（280px）より広くする。 */
.dropdown-panel-wide { width: 420px; max-height: 74vh; overflow-y: auto; }
.panel-heading { font-size: 12.5px; font-weight: 700; color: var(--tx-text); margin-bottom: 10px; }
/* 罫線ではなく余白だけでセクションを分ける。 */
.panel-heading-2nd { margin-top: 18px; }
.style-set-row, .num-set-row { flex-wrap: wrap; }
.row-tag { min-width: 34px; font-weight: 700; color: var(--tx-text); }
.row-field { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--tx-text); }
.row-field input[type="number"] {
  width: 52px; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--tx-border); font-size: 12.5px; font-family: inherit;
}
.row-field select {
  padding: 3px 4px; border-radius: 6px; border: 1px solid var(--tx-border); font-size: 12.5px; font-family: inherit; background: #fff;
}
.row-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--tx-text); }
.panel-apply-btn {
  display: block; width: 100%; height: 32px; margin-top: 14px; border-radius: var(--tx-radius-btn);
  border: 1px solid var(--tx-text); background: var(--tx-text); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.panel-apply-btn:hover { background: #262626; }
.panel-hint { font-size: 11.5px; color: var(--tx-muted-2); line-height: 1.6; margin: 8px 0 0; }

/* ── PDFモード（「開く」で.pdfを選んだ時） ──
   #doc（contenteditable本文）の代わりに#pdfViewerを表示する。ページ（.pdf-page）を縦に積み、
   通し番号・サイドノート配置（layoutSidenotes）は本文モードと完全に共通（app.js参照）。 */
#pdfViewer { display: flex; flex-direction: column; gap: 14px; }
#pdfViewer[hidden] { display: none; }   /* .doc-stack[hidden]と同じ理由（IDセレクタなのでなおさら必要） */
.pdf-page {
  position: relative; margin: 0 auto; background: #fff;
  border: 1px solid #e2e4e9; border-radius: 4px;   /* ページの境界だけ薄い罫線で示す（唯一の罫線的許容） */
  overflow: hidden;   /* テキストレイヤーがpercentageの丸め等でごく僅かにはみ出す場合の保険 */
}
.pdf-page canvas { display: block; }

/* PDF.js純正のTextLayerクラスに渡すコンテナ。スパンの位置(left/top)はTextLayer側がページ幅・高さに
   対するパーセンテージで指定してくるため、.pdf-text-layer自体の実寸（width/height）が正しいことが
   必須。TextLayerの内部実装はその実寸をcalc(round(down, var(--total-scale-factor)*Npx, var(--scale-round-*)))
   というCSS式で決めるので、そこで参照される3つのカスタムプロパティを.pdf-page側でJSから
   （そのページの実際の表示スケールで）与えておく必要がある（renderPdfPage参照）。 */
.pdf-text-layer {
  position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial;
}
.pdf-text-layer span, .pdf-text-layer br {
  color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%;
  font-size: var(--font-height);
}
.pdf-text-layer ::selection { background: rgba(26,115,232,.32); }
/* スキャンページ用に作る中身の無いテキストレイヤー（renderPdfPage参照）。誤ってクリックを
   奪わないよう、念のため明示しておく（実際には空なので奪う対象＝spanが無く実害は無い）。 */
.pdf-text-layer-empty { pointer-events: none; }
/* 文字があるページでは.pdf-text-layer（さらにその上）が選択操作を担うため、.pdf-annot-layer自体は
   クリックを素通しさせる（pointer-events:none。中の個々のマークも既に pointer-events:none）。
   文字が無い（＝スキャン）ページだけbindScanPageInteractionが.scan-modeを付け、クリック／ドラッグの
   受け口として自分自身を有効化する。 */
.pdf-annot-layer { position: absolute; inset: 0; pointer-events: none; }
.pdf-annot-layer.scan-mode { pointer-events: auto; cursor: crosshair; }

/* テキストPDFのノート：本文モードの.note-numと同じ考え方（ハイライトは付けず、選択開始位置に
   番号バッジを置くだけ）。位置は#pdfViewer全体からのpx（page-space座標×そのページのscale）。
   pdfモードのマークは（テーマの対象外である）ツールバー等と同じ「チロム」寄りの表示なので、
   #docのテーマ変数（--accent等）は使わず固定の赤にする。 */
.pdf-mark-text {
  position: absolute; transform: translate(-100%, -.2em);
  font-size: 11px; font-weight: 700; color: #ff4b4b; background: #fff; line-height: 1;
  padding: 1px 3px; border-radius: 3px; pointer-events: none; white-space: nowrap;
}
/* スキャンPDFの「クリック」ノート：文字を選択できないぶん、番号だけでなく丸いピン自体を目立たせる。 */
.pdf-mark-point {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: #ff4b4b; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* スキャンPDFの「ドラッグ」ノート：該当箇所を四角で囲み、左上角に番号バッジを乗せる。 */
.pdf-mark-rect {
  position: absolute; border: 2px solid #ff4b4b; border-radius: 3px;
  background: rgba(255,75,75,.08); pointer-events: none;
}
.pdf-mark-rect .pdf-mark-rect-num {
  position: absolute; left: -2px; top: -2px; transform: translateY(-100%);
  font-size: 11px; font-weight: 700; color: #fff; background: #ff4b4b; line-height: 1;
  padding: 1px 4px; border-radius: 3px 3px 3px 0;
}
/* ドラッグ中（確定前）のプレビュー矩形。確定後の.pdf-mark-rectと見分けられるよう破線にする。 */
.pdf-drag-preview {
  position: absolute; border: 2px dashed #ff4b4b; background: rgba(255,75,75,.08); pointer-events: none;
}

/* ── PDFモードの印刷版面 ──
   本文モードは「段落の右の余白へfloatで逃がす」方式だが、PDFページは1ページの中に複数の注釈が
   バラバラの高さで乗るため、そのページ画像に対する絶対座標でサイドノートを置く（画面上の
   レイアウトと同じ考え方）。元PDFが1ページ115mm幅に収まるようA4相当の縦横比で縮小される前提なら
   縦もA4印刷ページの版面（257mm程度）に収まるため、ページ画像をまたいでの絶対座標のズレは起きない
   （buildPrintDocPdf参照）。 */
body.print-active .print-pdf-page { position: relative; width: 115mm; margin: 0 0 10pt; clear: both; }
body.print-active .print-pdf-page-img { width: 115mm; display: block; }
/* 印刷版面でも画面と同じ目印（番号バッジ／ピン／矩形）をページ画像の上に重ねる。 */
body.print-active .print-pdf-mark-text {
  position: absolute; transform: translate(-100%, -.2em);
  font-size: 7.5pt; font-weight: 700; color: #ff4b4b; background: #fff; line-height: 1; padding: 1px 2px;
}
body.print-active .print-pdf-mark-point {
  position: absolute; width: 4mm; height: 4mm; margin: -2mm 0 0 -2mm; border-radius: 50%;
  background: #ff4b4b; color: #fff; font-size: 7pt; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
body.print-active .print-pdf-mark-rect { position: absolute; border: .5mm solid #ff4b4b; }
body.print-active .print-pdf-mark-rect span {
  position: absolute; left: -1px; top: -1px; transform: translateY(-100%);
  font-size: 7pt; font-weight: 700; color: #fff; background: #ff4b4b; line-height: 1; padding: 1px 2px;
}
/* サイドノート本文はページ画像の右の余白（外）へ絶対座標のtopだけ変えて並べる。段落側の
   .print-para .print-asideと違いfloatではないので、marginではなくrightのマイナス値で逃がす。 */
body.print-active .print-pdf-page .print-aside { position: absolute; left: 100%; margin-left: 3mm; width: 48mm; float: none; }