* { box-sizing: border-box; }
body {
  margin: 0; color: #31333f; background: #fff; padding: 28px 40px 100px;
  font-family: "Source Sans Pro", system-ui, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
/* https://pdf-redactor.pages.dev/ の.app-titleをそのまま踏襲（黒地に白抜き）。
   アプリの「チロム」（ツールバー・パネル類）は5つのデザイン（テーマ）に関わらず常にこの
   ニュートラルな見た目のまま固定する。テーマが変わるのは本文（#doc）とサイドノートの中身だけ。 */
.app-title {
  font-weight: 400; font-size: 26px; line-height: 1.35; text-align: center;
  background: #000; color: #fff; padding: 10px 12px; border-radius: 8px; margin: 0 0 16px;
}
/* タイトル・ヒントを大枠で囲む（枠は主張しすぎない薄さ・細さにする）。
   中央寄せ＋左右の余白（MkDocsの本文カラムのイメージ）で、A4的な縦長の版面にも対応する。
   ツールバーはここに含めない：position:stickyは自分の親の高さまでしか効かないため、
   この枠の中に入れると長い文章をスクロールした時に枠ごと画面外へ流れて隠れてしまう
   （bodyの直下に別要素として置き、文書の最後までスクロールしても固定され続けるようにする）。 */
.app-frame { border: 1px solid #e2e4e9; border-radius: 12px; padding: 24px 28px; max-width: 900px; margin: 0 auto 16px; }

/* ── 機能説明カード（旧・箇条書きの.hintから移行） ──
   3列×2行のカードで要点を1つずつ独立させる。カード自体の枠はapp-frameと同じ薄い罫線に揃える。 */
.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; }
.intro-card { border: 1px solid #e2e4e9; border-radius: 10px; padding: 16px 18px; font-size: 13.5px; line-height: 1.7; color: #31333f; }
@media (max-width: 860px) {
  .intro-grid { grid-template-columns: 1fr; }
}
/* 文章が長くなるとボタンに手が届かなくなるため、ツールバーを画面上部に固定する。 */
.toolbar-sticky {
  position: sticky; top: 8px; z-index: 20; background: #fff;
  max-width: 900px; margin: 0 auto 16px; padding-top: 4px;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
/* ボタン・ファイル選択ラベルは高さ・幅を全て揃えて1列に並べる（ラベルの長さに関わらず同じ幅）。
   罫線ではなくグレーの塗りつぶしで見せる（枠線の主張を抑える方針）。 */
.toolbar button, .toolbar .filebtn2 {
  font-size: 13px; height: 34px; width: 118px; padding: 0 12px; border-radius: 6px; border: none;
  background: #eef0f3; color: #31333f; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.icon { width: 1.05em; height: 1.05em; flex: none; }   /* Bootstrap Icons（MITライセンス）のSVGを絵文字の代わりに使う */
.toolbar button:hover, .toolbar .filebtn2:hover { background: #e2e4e9; color: #ff4b4b; }
.toolbar button:disabled { background: #f5f6f8; color: #b7bac2; cursor: not-allowed; }
.toolbar .filebtn2 input { display: none; }
.toolbar .sep { width: 1px; height: 22px; background: #e2e4e9; margin: 0 2px; }

/* タイトル欄はツールバーから独立させ、全幅の1行ボックスにする（テキストの主役として目立たせる）。 */
.title-row { max-width: 900px; margin: 4px auto 0; }
.title-row input[type="text"] {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid #e2e4e9;
  font-size: 14px; font-family: inherit; background: #fff; color: #31333f;
}
.title-row input[type="text"]:focus { outline: none; border-color: #ff4b4b; }
#saveStatus { max-width: 900px; margin: 8px auto 0; font-size: 12.5px; color: #666; min-height: 1.4em; }

/* ── 「設定」「デザイン」「MD貼付け」「各種ボタンのヘルプ」のドロップダウンパネル ──
   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 ul { margin: 0; padding-left: 18px; }
.dropdown-panel li { margin-bottom: 8px; }
.dropdown-panel li:last-child { margin-bottom: 0; }
.settings-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.settings-row:last-child { margin-bottom: 0; }
.settings-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.settings-dot[data-color="black"] { background: #31333f; }
.settings-dot[data-color="blue"] { background: #1a73e8; }
.settings-dot[data-color="red"] { background: #d33; }
.settings-row input[type="text"] {
  flex: 1 1 auto; font-size: 13px; padding: 6px 8px; border-radius: 6px; border: 1px solid #e2e4e9;
  font-family: inherit; color: #31333f;
}
.settings-row input[type="text"]:focus { outline: none; border-color: #ff4b4b; }
.settings-fixed { font-size: 12.5px; color: #8a8f98; }
/* 罫線ではなく余白だけで区切る（色の名前設定と、表示のオンオフ設定の間）。 */
.settings-toggle {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 12.5px; color: #31333f; cursor: pointer;
}
.settings-toggle input { flex: none; }
.dropdown-panel > .settings-toggle:first-child { margin-top: 0; margin-bottom: 14px; }

/* ── デザイン（テーマ）パネル ── */
.theme-grid { display: flex; flex-direction: column; gap: 6px; }
.theme-swatch {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid #e2e4e9; background: #fff; border-radius: 8px; padding: 8px 10px;
  cursor: pointer; text-align: left; width: 100%;
}
.theme-swatch:hover { border-color: #ff4b4b; }
.theme-swatch.selected { border-color: #ff4b4b; background: #fff4f4; }
.theme-swatch-name { font-size: 13px; font-weight: 600; color: #31333f; }
.theme-swatch-desc { font-size: 11.5px; color: #8a8f98; }

/* ── MD貼付けパネル（ノートのポップオーバーより幅・高さを大きく取る） ── */
#mdPastePanel { width: 520px; max-width: calc(100vw - 40px); }
.mdpaste-label { font-size: 12.5px; color: #666; margin-bottom: 8px; }
#mdPasteInput {
  width: 100%; font-size: 13px; font-family: "Source Sans Pro", monospace; border: 1px solid #e2e4e9;
  border-radius: 6px; padding: 8px; resize: vertical;
}
#mdPasteInput:focus { outline: none; border-color: #ff4b4b; }
#mdPastePanel .row { display: flex; gap: 8px; margin-top: 8px; }
#mdPastePanel .row button {
  flex: 1 1 0; font-size: 13px; padding: 7px; border-radius: 6px; border: none;
  background: #eef0f3; color: #31333f; cursor: pointer;
}
#mdPastePanel .row button:not(.primary):hover { background: #e2e4e9; color: #ff4b4b; }
#mdPastePanel .row button.primary { background: #ff4b4b; color: #fff; font-weight: 600; }

.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 {
  width: 260px; flex: none; position: relative;   /* 区切りは罫線ではなくgap（余白）だけに任せる */
  font-family: var(--font-body);
}

/* ドラッグ＆ドロップで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; }

/* ==================================================================
   ここから下（#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; border-color: var(--accent); }
/* 本文が空の間だけ、それらしい案内をグレーで重ねて見せる（#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行ぶんの単位。段落間の余白は空の段落（空行）の高さで作る */
/* 本文の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: #e2e4e9; color: #ff4b4b; }
.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: #e2e4e9; color: #ff4b4b; }
.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: #e2e4e9; color: #ff4b4b; }
.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: #e2e4e9; color: #ff4b4b; }
.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: #e2e4e9; color: #ff4b4b; }
.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: #e2e4e9; color: #ff4b4b; }
.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; }
.sidenote-text { white-space: pre-line; 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: #ff4b4b; }
.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: #ff4b4b; }

/* 注釈が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: #ff4b4b; }
.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: #e2e4e9; color: #ff4b4b; }
.note-popover button.primary { background: #ff4b4b; color: #fff; font-weight: 600; }

@media (max-width: 860px) {
  .doc-wrap { flex-direction: column; }
  .doc-right { 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.print-active { padding: 0; margin: 0; }
body.print-active .app-frame, 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 { 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:0、余白は空行の段落の高さだけで表現する）と
   段落間の余白の作り方を揃えるため（MD取り込み時もこの前提で空の段落＝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; overflow-wrap: break-word;
}
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); }