* { box-sizing: border-box; }
/* ── templex.jp から実測したデザイントークン（2026-09-10、templex.jp風のリデザインで導入） ──
グレースケールのみ（アクセントカラー無し）。本アプリの黒/青/赤の3色は
注釈の種別を表す機能色なので維持し、装飾用の赤（ホバー・フォーカス枠）だけ無彩色に寄せる。 */
:root {
--tx-text: #0a0a0a;
--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: #fff; 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: #fafafa;
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; }
/* ── アプリのイメージ図（ブラウザ枠） ── */
.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); }
/* ── 派生アプリ3枚 ── */
.related-row-label { margin-top: 22px; font-size: 12px; font-weight: 600; color: var(--tx-muted-2); }
.related-row { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-card {
display: block; border: 1px solid var(--tx-border); border-radius: 10px; padding: 12px 14px;
background: #fff; text-decoration: none; color: inherit;
transition: box-shadow .15s, border-color .15s, transform .15s;
}
/* リンクだと分かるよう、名前の右に矢印を添える（→はhoverで右へ少し動く）。影も付けて
カード自体が持ち上がるようにし、静的な区切り枠と見分けやすくする。 */
.related-card:hover { box-shadow: var(--tx-shadow-md); border-color: #d4d4d4; transform: translateY(-1px); }
.related-card:hover .related-card-arrow { transform: translateX(2px); color: var(--tx-text); }
/* 派生アプリ名は最長で「ウェブ用Markdown作成版」。カード幅（3列で1枚167px）に1行で収める
ため12pxにしている（折り返すとカードごとに高さが揃わず、行の見た目が崩れる）。 */
.related-card-name {
font-size: 12px; font-weight: 600; color: var(--tx-text);
display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.related-card-arrow { width: 13px; height: 13px; flex: none; color: var(--tx-muted-2); transition: transform .15s, color .15s; }
.related-card-desc { font-size: 11.5px; color: var(--tx-muted-2); margin-top: 4px; line-height: 1.6; }
.related-card-soon { background: #fafafa; }
.related-card-soon .related-card-name, .related-card-soon .related-card-desc { color: #a3a3a3; }
/* 名前の行ではなく説明の下に置く（名前の行に同居させると名前が折り返す）。 */
.soon-badge {
display: inline-block; margin-top: 8px;
font-size: 10px; font-weight: 500; color: var(--tx-muted-2); background: #f2f2f2;
border-radius: 999px; padding: 1px 8px;
}
/* ── ボタン共通（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; }
/* カードは3枚横並びのまま。ノートPCの幅（〜1250px）では1枚160px前後まで痩せるので、
文字と内側の余白だけ少し詰めて長い名前を収める。 */
@media (max-width: 1250px) {
.related-card { padding: 10px 11px; }
.related-card-name { font-size: 11.5px; }
.related-card-desc { font-size: 11px; }
}
@media (max-width: 860px) {
.hero-inner { grid-template-columns: 1fr; gap: 32px; }
.related-row { grid-template-columns: 1fr; }
.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; }
}
/* 文章が長くなるとインデント等のボタンに手が届かなくなるため、ツールバーを画面上部に固定する。 */
.toolbar-sticky {
position: sticky; top: 8px; z-index: 20; background: #fff;
max-width: 900px; margin: 0 auto 16px; padding-top: 48px;
}
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
/* ボタンの見た目は.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行ボックスにする（テキストの主役として目立たせる）。
.toolbar-stickyと同じ900px中央寄せを、ここでも個別に指定する。
上には常時表示の.title-label（何を入れる欄か一目で分かるように）、上下には余白を持たせる。 */
.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); }
#saveStatus { max-width: 900px; margin: 8px auto 0; font-size: 12.5px; color: #666; min-height: 1.4em; }
/* ── 「設定」「各種ボタンのヘルプ」のドロップダウンパネル ──
note-popoverと同じ考え方（枠線ではなく影だけで境界を示す）を踏襲。 */
.dropdown-panel {
position: absolute; z-index: 55; width: 280px; background: #fff; border: 1px solid var(--tx-border);
border-radius: var(--tx-radius-card); box-shadow: var(--tx-shadow-lg); 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; }
/* 先頭にタイトル＋閉じるボタンの行を置く（旧来はもう一度同じボタンを押さないと閉じられなかったため、
明示的な閉じる手段として追加）。 */
.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; }
.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: var(--tx-text); }
.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; }
/* ── ヘルプアイコン（Streamlitのhelp=に相当・現在は未使用だが今後の説明表示用に残す）──
標準のtitle属性は「どこにカーソルを置けば説明が出るか」が画面から分からず見落とされやすいため、
説明の存在が見える小さい「?」を置き、吹き出しは枠線を使わず影だけで境界を示す（好みに合わせる）。 */
.help-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.help-icon {
width: 15px; height: 15px; border-radius: 50%; border: none; background: #e2e4e9; color: #6b6f76;
font-size: 10px; line-height: 1; cursor: help; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.help-icon:hover, .help-icon:focus { background: var(--tx-text); color: #fff; outline: none; }
.help-tip {
position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: max-content; max-width: 240px;
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;
}
.help-icon:hover + .help-tip, .help-icon:focus + .help-tip { opacity: 1; visibility: visible; }
/* 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);
}
.doc-wrap { display: flex; gap: 28px; max-width: 900px; margin: 20px auto 0; }
.doc-left { flex: 1 1 auto; min-width: 0; position: relative; } /* 段落ホバー時のアイコン(.para-hover)の位置基準 */
/* テキスト・スクショどちらも入れられる欄だと一目で分かるよう、枠の上に小さく添える
（枠が空の間だけ出るplaceholderと違い、入力後もずっと表示され続けるラベル）。 */
.doc-label { font-size: 12.5px; color: var(--tx-muted-2); margin: 0 0 6px; }
.doc-right {
width: 260px; flex: none; position: relative; /* 区切りは罫線ではなくgap（余白）だけに任せる */
}
/* #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にしてもこれが無いと本文の見本が透けて残る）。 */
.doc-stack[hidden] { display: none; }
#doc {
border: 1px solid var(--tx-border); border-radius: var(--tx-radius-card); box-shadow: var(--tx-shadow-sm); padding: 24px;
font-size: 15px; line-height: 1.9; min-height: 300px;
}
#doc:focus { outline: none; border-color: var(--tx-text); }
/* 本文が空の間だけ、それらしい例文をグレーで重ねて見せる（#docのJS側で.emptyを付け外しする）。
クリックは下の#docへ素通しし、実際に何か入力・貼り付けした瞬間にJS側で消える。 */
#docSample {
display: none; padding: 20px; font-size: 15px; line-height: 1.9;
color: #b7bac2; pointer-events: none;
}
#doc.empty ~ #docSample { display: block; }
.para { margin: 0; } /* テキスト段落＝1行。インデント／ぶら下げインデントはこの要素にpadding-left/text-indentで適用する */
/* 本文の1行を常時37字以内にする。CJKフォントは全角1文字がほぼ1em幅で設計されているため、
max-width:37emで近似する（画像ブロックは対象外＝.para-imageを除外）。
インデントのpadding-leftもこの37emの内側に含まれるので、字下げした行はその分だけ実質の文字数が減る
（＝実際の文書と同じ見え方になる）。半角英数字が混じる行は厳密には37字ちょうどにならない場合がある。 */
.para:not(.para-image) { max-width: 37em; }
.note-anchor { cursor: default; } /* ハイライト（マーキング）は無し。注釈の目印は先頭の番号だけ */
.note-num {
font-size: .65em; font-weight: 700; margin-right: 2px; color: #ff4b4b; vertical-align: super;
user-select: none;
}
/* ── 段落ホバー時の「＋画像」「×削除」（JIMDO的なブロック単位の操作） ──
#docの外側の要素なので、位置は.doc-left基準の絶対座標（JSがtopだけ合わせる）。
横位置は.doc-rightとの間の余白(28px)に収まるよう、.doc-leftのすぐ右に固定で置く。
paddingを付けて当たり判定を見た目より広めに取り、段落からここまでマウスを動かす途中で
多少ズレても入り直せるようにする（2026-08-19、クリックしづらいとの指摘を受けて調整）。 */
.para-hover {
position: absolute; left: 100%; margin-left: 4px; top: 0; padding: 4px;
display: flex; flex-direction: column; gap: 4px; z-index: 15;
}
/* [hidden]とdisplay:flexが同じ詳細度になり、後勝ちでflexが表示してしまうのを防ぐ
（[hidden]側の詳細度を明示的に上げて、hidden属性がある間は必ず隠す）。 */
.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; }
/* ── 画像段落（スクショ） ──
罫線ではなく淡い背景で「1つのブロック」を示す（罫線を多用しない、という見た目の方針を画像でも踏襲）。 */
.para-image { margin: 16px 0; padding: 12px; border-radius: 10px; background: #f7f7f9; }
.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; }
/* コメントが無い間は高さゼロ（min-heightを持たせない）で余白を作らない。バッジが付いたら:not(:empty)で
余白を確保する（画像との間の隙間）。 */
.para-image-notes:not(:empty) { display: flex; gap: 6px; margin-bottom: 4px; }
/* 1つの注釈対象（一文・画像）に複数のコメント（自分・共有相手の返信）が並ぶことがあるため、
カード全体で1つの通し番号を持ち、その中に複数行（.sidenote-entry）を積む構成にする。 */
.sidenote-card {
position: absolute; left: 20px; right: 0; font-size: 13px; line-height: 1.7; color: #444;
}
.sidenote-num { color: #6b6f76; 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: 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: #8a8f98; 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;
}
/* 「自分／共有相手／重要」の3色から選ぶ。選択色はドット(::before)で示し、選択中はグレー地で強調する。 */
.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 { display: none; } /* スマホ幅ではサイドノート欄自体を非表示にする（横並びの余白が無いため） */
/* .doc-rightとの間の余白が無くなる幅なので、.para-hoverは外側ではなく#docの内側右端に置く。 */
.para-hover { left: auto; right: 4px; margin-left: 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-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保存）専用の版面 ──
画面のサイドノートはJSで実測した絶対座標で配置しているが、印刷はページをまたぐため使えない。
代わりにJupyter Book（sphinx-book-theme）と同じ「float」方式にする：
段落はfloat:leftで固定幅の左カラムに、注釈(aside)はfloat:rightで右カラムに、
隣り合う兄弟要素として並べる（asideを段落の中に入れない＝段落の最大幅に押し込められて
独立したカラムにならないため）。段落側はclear:leftで必ず新しい行から始める。 */
#printDoc { display: none; }
@page {
size: A4;
margin: 20mm;
}
/* 以前は@media printでこのブロックを囲っていたが、body.print-activeクラスの有無で判定する方式に
変更した。理由：window.print()はOSネイティブの印刷ダイアログを開くため、印刷レイアウトの実際の
描画をブラウザ自動化ツール（devtools相当）から確認できない。クラス方式にすれば、
document.body.classList.add("print-active")するだけで画面上にそのまま印刷版面が表示され、
window.print()を呼ばなくても実機の描画（floatの挙動含む）を確認できる。実際の印刷時も
savePdfBtn.onclick内で同じクラスを付けてからwindow.print()を呼ぶため、プレビューと本番の
見た目は完全に一致する（ルールを2重管理する必要がない）。 */
body.print-active { padding: 0; margin: 0; }
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 { display: none !important; }
body.print-active #printDoc {
display: block !important;
font-family: "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-size: 14pt; font-weight: 700; margin: 0 0 16pt; clear: both; }
/* 段落はfloatさせず、幅115mmの通常のブロックとして縦に積む（＝本文は自然な折り返し以外では
絶対に改行されない）。サイドノートは段落の中に対応する一文の直後としてインラインで埋め込み
（buildPrintNode参照）、.print-asideのfloat:right＋マイナスマージンで段落の右の余白へ逃がす
（Tufte CSSとして知られる余白注釈の定番手法）。
2026-08-19：以前は「段落を注釈の位置で複数のに分割する」方式だった。分割した
同士は
同じ幅のfloat:leftになり横に並ぶ余地が無いため、注釈の直後で必ず改行されたように見える
不具合になっていた。段落を分割しない今の方式なら、この問題は原理的に起きない。
marginは持たせない：画面側の#doc .para（margin:0、余白は空行の段落の高さだけで表現する）と
段落間の余白の作り方を揃えるため。marginを足すと、貼り付け元の改行がそのまま複数の.paraに
割れているケース（コピー元で1行ごとに改行が入っていた等）で、段落の数だけ余白が積み重なって
画面よりPDFの方が段落間が広く見える不具合になっていた。
clearは意図的に付けない：.print-paraは新しいブロック整形コンテキストを作らないため、
.print-asideを子に持つ.print-paraにclearを付けると、そのasideが（マイナスマージンで
はみ出しているにもかかわらず）「まだ隣にfloatが残っている」扱いになり、次の段落がその
asideの下まで律儀に待ってしまう（＝段落の長い注釈のぶんだけ余白が空いて見える、
2026-08-19に複数回報告された不具合の本当の原因はこれだった。前回この段落自体のclearは
残したまま::afterのクリアフィックスだけ外したが、それでは直っていなかった）。
画像(.print-img、floatのまま)の直後に段落が来ても、画像と段落は同じ幅(115mm)で横に並ぶ
余地が無いため、clearが無くても段落は自然に画像の下から始まる（下記テストで確認）。 */
body.print-active .print-para {
width: 115mm; margin: 0;
overflow-wrap: break-word;
}
/* あえてclearfix（floatの子=.print-asideの高さを親に含める処理）は入れない。入れると、注釈が
その段落の本文より長い時、次の段落がその注釈の下まで律儀に空けて始まってしまい、段落ごとの
余白が不揃いに広がって見える（2026-08-19に報告あり）。本文（幅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-aside {
width: 48mm; float: right; clear: right; margin: 0 0 8pt; font-size: 8.5pt; line-height: 1.6; color: #333;
/* 出典のURLのように区切りの無い長い文字列は、そのままだと48mmの枠からはみ出して印刷時に
途中で切れる（2026-09-05に実測：枠181pxに対し中身312px）。本文（.print-para）には
overflow-wrap: break-word があるが、画像へのサイドノートは本文の中ではなく#printDoc直下に
置かれるため（下のコメント参照）その指定を受け継がない。 */
overflow-wrap: anywhere;
}
/* 段落の中にインラインで埋め込まれた場合だけ、段落自身の右の余白（外）へ逃がす。画像の直後に
段落の外（#printDocの直接の子）として置かれる場合（画像への注釈）は今まで通りfloat:rightのみ。 */
body.print-active .print-para .print-aside { margin-right: -48mm; }
body.print-active #printDoc sup { font-size: .75em; color: #666; }
/* ── 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; }
/* ============================================================
ここから下は「書面レイアウト版」だけの追加分。
上のブロックはsidenote-pdf（本体）のstyle.cssと同じものを共有している
（デザインを揃えるため、本体を直したらこのファイルの上半分も同じ内容に更新する）。
============================================================ */
/* このアプリはボタンが8つ（本体は6つ）あるため、共通の118pxだと900px幅に収まらず折り返す。
最長ラベル「続きから再開」が入る範囲で少しだけ詰める（8×104px＋gap8px×7＝888px）。 */
.toolbar .btn-outline, .toolbar .btn-primary, .toolbar .filebtn2 { width: 104px; }
/* ── ヒーローのイメージ図の追加パーツ（このアプリ固有） ──
書き出した先＝サイドノート付きのウェブページ、という絵にするため、左にサイト内メニュー
（MkDocs/Docsify風）を足し、本文には見出し（.mock-h）を置く。 */
.mock-site { gap: 12px; }
.mock-nav { width: 62px; flex: none; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.mock-nav-line { height: 6px; border-radius: 3px; background: #eceef1; }
.mock-nav-current { background: #c9ccd2; }
.mock-h { height: 11px; border-radius: 4px; background: #d7dade; }
/* ── 本文の書式ツールバー（配置／インデント／ぶら下げ／太字下線／スタイル） ──
ファイル操作の.toolbarとは幅・並びの性格が違う（ラベルの長さがバラバラ）ため、
固定幅118pxは踏襲せず、ボタンごとに中身の幅に合わせる。 */
.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も併せ持つため、そちらの固定幅118px（.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); }
.fmt-btn-wide { width: auto; padding: 0 10px; }
/* 配置／インデント／ぶら下げ／スタイルは、ラベルの字数（「左」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; }
/* 罫線ではなく余白だけでセクションを分ける（.settings-toggleと同じ考え方）。 */
.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; }
/* 書き出しパネルの補助ボタン（保存先の選び直し・コピー）。主操作の.panel-apply-btnより
小さく、3つ横に並べる。 */
.panel-btn-row { display: flex; gap: 6px; margin-top: 8px; }
.panel-sub-btn { flex: 1 1 0; height: 30px; font-size: 12px; padding: 0 8px; }
#exportPanel .row-field select { width: 100%; padding: 6px 8px; font-size: 13px; }
#exportPanel code { font-size: 11px; background: var(--tx-bg-muted); border-radius: 4px; padding: 1px 4px; }