/* print-proof v1.5.1 — 印刷物 HTML の確認画面（追尾ヘッダー・見開き表示・印刷・校正コメント・入稿データ）
正本: 共通WEBモジュール/modules/print-proof/ 使い方は同じフォルダの README.md
前提: div.stage の中に section.page が並ぶ。ページの寸法（A4 など）はプロジェクト側の CSS で決める。
色・書体は :root の --pp-* を上書きして合わせる。 */
:root {
--pp-page-w: 210mm; /* JS の init({pageWidthMm}) からも設定される */
--pp-panel-w: 380px; /* コメントのサイドバー幅 */
--pp-bar: #14213D; /* ヘッダー・サイドバー見出しの地色 */
--pp-accent: #E9C46A; /* 主ボタン（印刷）の色 */
--pp-accent-hover: #F0D27E;
--pp-red: #C9503A; /* 未解決のピン・「コメントを付ける」 */
--pp-green: #7A8B6E; /* 解決済みのピン */
--pp-paper: #FBF9F4;
--pp-paper-2: #F4F0E6;
--pp-ink: #1C2033;
--pp-ink-2: #5B5F73;
--pp-mute: #8A8D99;
--pp-line: #E2DCCF;
--pp-font: "Noto Sans JP", system-ui, -apple-system, sans-serif;
--pp-font-en: "IBM Plex Sans", system-ui, sans-serif;
}
/* ---- ヘッダー（追尾するが、ページの上には被らない） ---- */
.pp-toolbar { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.55rem 1rem; background: var(--pp-bar); color: #fff; font-family: var(--pp-font-en); font-size: 13px; box-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.pp-toolbar b { font-family: var(--pp-font); font-weight: 500; }
.pp-toolbar small { opacity: 0.75; }
.pp-toolbar .sp { flex: 1; }
.pp-toolbar button { appearance: none; border: 0; background: var(--pp-accent); color: var(--pp-bar); font: 700 13px var(--pp-font); padding: 0.45rem 1rem; border-radius: 3px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; }
.pp-toolbar button:hover { background: var(--pp-accent-hover); }
.pp-toolbar button.pp-print::after { content: ""; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.pp-toolbar button.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.pp-toolbar button.ghost:hover { background: rgba(255,255,255,0.12); }
.pp-toolbar button.ghost.on { background: rgba(255,255,255,0.18); }
.pp-toolbar .cnt { display: inline-block; min-width: 1.4em; padding: 0 0.35em; margin-left: 0.2em; border-radius: 999px; background: var(--pp-accent); color: var(--pp-bar); font-size: 11px; text-align: center; }
.pp-toolbar .cnt.zero { background: rgba(255,255,255,0.25); color: #fff; }
/* ---- ステージ（1ページずつ／見開き） ---- */
.stage { padding: 12px 0 40px; }
body.spread .stage { display: grid; grid-template-columns: var(--pp-page-w) var(--pp-page-w); justify-content: center; row-gap: 12mm; column-gap: 0; padding: 4mm 0 20mm; }
body.spread .page { margin: 0; }
body.spread .page.spread-left { box-shadow: -8px 10px 40px rgba(0,0,0,0.45); }
/* 表紙（1ページ目）を見開きの右側に置くのはプロジェクト側で: body.spread .page:first-child { grid-column: 2; } */
/* ---- 校正コメント ---- */
body.cmt-on .page :is(p, h1, h2, h3, h4, h5, li, figcaption, dt, dd, td, th, .ph, img) { cursor: crosshair; }
body.cmt-on .page :is(p, h1, h2, h3, h4, h5, li, figcaption, dt, dd, td, th, .ph):hover { outline: 2px dashed var(--pp-accent); outline-offset: 2px; background: rgba(233,196,106,0.18); }
body.cmt-on .page img:hover { outline: 3px dashed var(--pp-accent); outline-offset: -3px; }
.cmt-target { outline: 2px solid var(--pp-red) !important; outline-offset: 2px; }
img.cmt-target { outline-offset: -3px; }
.cmt-target--done { outline: 2px dotted var(--pp-green) !important; }
.cmt-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cmt-pin { position: absolute; pointer-events: auto; width: 22px; height: 22px; border-radius: 999px 999px 999px 2px; background: var(--pp-red); color: #fff; font: 700 11px/22px var(--pp-font-en); text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,0.35); cursor: pointer; border: 2px solid #fff; box-sizing: border-box; }
.cmt-pin--done { background: var(--pp-green); }
.cmt-pin--page { border-radius: 999px; }
.cmt-panel[hidden], .cmt-pop[hidden] { display: none !important; } /* display:flex が hidden 属性に勝つので必須 */
.cmt-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--pp-panel-w), 100vw); z-index: 60; background: var(--pp-paper); color: var(--pp-ink); box-shadow: -6px 0 24px rgba(0,0,0,0.35); display: flex; flex-direction: column; font-family: var(--pp-font); }
.cmt-panel__hd { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--pp-line); background: var(--pp-bar); color: #fff; font-size: 13px; }
.cmt-panel__hd .sp { flex: 1; }
.cmt-panel__hd label { font-size: 12px; display: inline-flex; align-items: center; gap: 0.3em; }
.cmt-panel__tools { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--pp-line); background: var(--pp-paper-2); }
.cmt-panel__tools .hint { font-size: 11px; color: var(--pp-ink-2); line-height: 1.4; }
.cmt-attach { appearance: none; border: 0; background: var(--pp-red); color: #fff; font: 700 13px var(--pp-font); padding: 0.5rem 0.9rem; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.cmt-attach.on { background: var(--pp-bar); }
.cmt-panel__note { margin: 0; padding: 0.5rem 0.9rem; font-size: 11.5px; color: var(--pp-ink-2); border-bottom: 1px solid var(--pp-line); }
.cmt-panel__note:empty { display: none; }
.cmt-list { list-style: none; margin: 0; padding: 0.4rem 0.6rem 2rem; overflow: auto; flex: 1; }
.cmt-item { border: 1px solid var(--pp-line); border-left: 4px solid var(--pp-red); background: #fff; border-radius: 4px; padding: 0.55rem 0.7rem; margin: 0.45rem 0; font-size: 12.5px; line-height: 1.6; }
.cmt-item--done { border-left-color: var(--pp-green); opacity: 0.75; }
.cmt-item--active { box-shadow: 0 0 0 2px var(--pp-accent); }
.cmt-item__where { font-size: 11px; color: var(--pp-ink-2); cursor: pointer; }
.cmt-item__where b { color: var(--pp-red); font-family: var(--pp-font-en); margin-right: 0.4em; }
.cmt-item__meta { font-size: 11px; color: var(--pp-mute); margin-top: 0.15rem; }
.cmt-item__text { white-space: pre-wrap; margin: 0.3rem 0 0.4rem; }
.cmt-item__btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cmt-replies { margin: 0.35rem 0 0.45rem; padding-left: 0.6rem; border-left: 2px solid var(--pp-line); }
.cmt-reply { font-size: 12px; line-height: 1.55; padding: 0.25rem 0; }
.cmt-reply__meta { display: block; font-size: 10.5px; color: var(--pp-ink-2); }
.cmt-reply__meta b { display: inline-block; background: var(--pp-bar); color: #fff; font-size: 10px; line-height: 1.6; padding: 0 0.55em; border-radius: 999px; margin-right: 0.45em; vertical-align: middle; }
.cmt-reply--action { border-left: 2px solid var(--pp-bar); padding-left: 0.45rem; }
.cmt-new { display: inline-block; font-style: normal; background: var(--pp-red); color: #fff; font-size: 10px; line-height: 1.6; padding: 0 0.5em; border-radius: 999px; margin-left: 0.4em; vertical-align: middle; }
.cmt-switch { display: inline-flex; align-items: center; gap: 0.35em; font-size: 11.5px; cursor: pointer; user-select: none; margin: 0; }
.cmt-switch input, .cmt-replyform .cmt-switch input { appearance: none; -webkit-appearance: none; width: 30px; height: 17px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: #C9C4B8; position: relative; cursor: pointer; transition: background .15s; }
.cmt-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .15s; }
.cmt-switch input:checked { background: var(--pp-bar); }
.cmt-switch input:checked::after { left: 15px; }
.cmt-switch input:checked + span { color: var(--pp-bar); font-weight: 700; }
.cmt-reply__text { white-space: pre-wrap; }
.cmt-reply .cmt-mini { padding: 0.05rem 0.4rem; font-size: 10.5px; margin-left: 0.4em; vertical-align: middle; }
.cmt-replyform { margin: 0.4rem 0; padding: 0.5rem 0.6rem; background: var(--pp-paper-2); border: 1px solid var(--pp-line); border-radius: 3px; }
.cmt-replyform input, .cmt-replyform textarea { width: 100%; box-sizing: border-box; font: 12.5px var(--pp-font); padding: 0.35rem 0.45rem; border: 1px solid #C9C4B8; border-radius: 3px; margin-bottom: 0.35rem; background: #fff; }
.cmt-replyform label { display: inline-flex; align-items: center; gap: 0.3em; font-size: 11.5px; margin-right: 0.6rem; }
.cmt-replyform__btns { display: flex; justify-content: flex-end; align-items: center; gap: 0.4rem; }
.cmt-mini { appearance: none; border: 1px solid rgba(20,33,61,0.35); background: #fff; color: var(--pp-ink); font: 500 11.5px var(--pp-font); padding: 0.25rem 0.6rem; border-radius: 3px; cursor: pointer; }
.cmt-panel__hd .cmt-mini { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.5); }
.cmt-mini.warn { color: var(--pp-red); border-color: var(--pp-red); }
.cmt-pop { position: fixed; z-index: 70; width: min(360px, 92vw); background: #fff; border: 1px solid var(--pp-line); border-top: 4px solid var(--pp-red); border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,0.35); padding: 0.7rem 0.8rem; font-family: var(--pp-font); }
.cmt-pop__where { font-size: 11.5px; color: var(--pp-ink-2); margin-bottom: 0.4rem; max-height: 3.2em; overflow: hidden; }
.cmt-pop input, .cmt-pop textarea { width: 100%; box-sizing: border-box; font: 13px var(--pp-font); padding: 0.4rem 0.5rem; border: 1px solid #C9C4B8; border-radius: 3px; margin-bottom: 0.4rem; background: var(--pp-paper); }
.cmt-pop textarea { resize: vertical; }
.cmt-pop__btns { display: flex; justify-content: flex-end; gap: 0.5rem; }
.cmt-save { appearance: none; border: 0; background: var(--pp-red); color: #fff; font: 700 13px var(--pp-font); padding: 0.4rem 1rem; border-radius: 3px; cursor: pointer; }
/* サイドバーはデザインに重ねない: body の右余白で場所を空ける（拡大率は JS がこの幅を引いて決める） */
body.cmt-panel-open { padding-right: min(var(--pp-panel-w), 100vw); }
@media (max-width: 720px) {
.cmt-panel { width: 100vw; top: auto; height: 60vh; box-shadow: 0 -6px 24px rgba(0,0,0,0.35); }
body.cmt-panel-open { padding-right: 0; padding-bottom: 60vh; }
}
/* ---- 印刷時は確認用の要素をすべて消す ---- */
@media print {
.pp-toolbar, .cmt-layer, .cmt-panel, .cmt-pop { display: none !important; }
.cmt-target { outline: none !important; }
body.cmt-panel-open { padding: 0 !important; }
.stage { padding: 0; zoom: 1 !important; display: block !important; }
body.spread .page { margin: 0; }
}
/* ---------- 入稿データ出力（塗り足し＋トンボ） ----------
用紙 ＝ 仕上がり ＋ 塗り足し×2 ＋ トンボ用の余白×2。トンボは黒い細線（0.25mm）。 */
.pp-pressbar { position: sticky; top: 44px; z-index: 49; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; padding: 0.55rem 1rem; background: var(--pp-paper-2); color: var(--pp-ink); border-bottom: 1px solid var(--pp-line); box-shadow: inset 0 3px 0 var(--pp-accent); font-family: var(--pp-font); font-size: 13px; }
.pp-pressbar[hidden] { display: none !important; } /* display:flex が hidden 属性に勝つ。v1.5 は「確認画面に戻る」でこの帯が消えなかった（v1.5.1 で修正） */
.pp-pressbar > b { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--pp-bar); color: #fff; font: 700 12px var(--pp-font); letter-spacing: 0.04em; padding: 0.3rem 0.75rem; border-radius: 999px; }
.pp-pressbar > b::before { content: ""; width: 0.55em; height: 0.55em; border: 1.5px solid var(--pp-accent); border-radius: 1px; box-shadow: 2px 2px 0 rgba(233,196,106,0.5); } /* トンボ風の小さな印 */
.pp-pressbar small { color: var(--pp-ink-2); }
.pp-pressbar .sp { flex: 1; }
/* 設定はそれぞれ白い札に。数値の枠は札の中に溶かす */
.pp-pressbar label { display: inline-flex; align-items: center; gap: 0.35rem; background: #fff; border: 1px solid var(--pp-line); border-radius: 6px; padding: 0.15rem 0.35rem 0.15rem 0.6rem; color: var(--pp-ink-2); }
.pp-pressbar input[type="number"] { width: 4.6rem; padding: 0.2rem 0.4rem; border: 0; border-left: 1px solid var(--pp-line); border-radius: 0; background: transparent; font: inherit; font-weight: 700; color: var(--pp-ink); text-align: right; }
.pp-pressbar input[type="number"]:focus, .pp-pressbar select:focus { outline: 2px solid var(--pp-accent); outline-offset: 1px; border-radius: 3px; }
.pp-pressbar select { padding: 0.2rem 0.3rem; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--pp-ink); }
.pp-pressbar__size { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--pp-ink-2); border: 1px dashed var(--pp-line); border-radius: 6px; padding: 0.2rem 0.6rem; }
.pp-pressbar__size span { font-weight: 700; color: var(--pp-ink); font-family: var(--pp-font-en); }
/* ボタン（v1.5 は素のブラウザ既定のままだった。ヘッダーのボタンと同じ型に） */
.pp-pressbar button { appearance: none; font: 700 13px var(--pp-font); padding: 0.45rem 1rem; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; border: 1.5px solid var(--pp-bar); background: transparent; color: var(--pp-bar); transition: background 0.15s; }
.pp-pressbar button:hover { background: rgba(20,33,61,0.08); }
.pp-pressbar button.pp-print { background: var(--pp-bar); color: #fff; }
.pp-pressbar button.pp-print:hover { background: #22345f; }
.pp-pressbar button.pp-print::after { content: ""; width: 0.45em; height: 0.45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.pp-pressbar button#ppPressClose::before { content: ""; width: 0.45em; height: 0.45em; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.pp-pressbar button.pp-mini { padding: 0.2rem 0.65rem; font-size: 12px; border-radius: 999px; border-width: 1px; }
.pp-pressbar__btns { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* 2 つのボタンはいつも並べる（折り返しても離れない） */
.pp-pressbar__note { flex-basis: 100%; font-size: 11.5px; color: var(--pp-ink-2); }
.pp-pressbar__spine { display: inline-flex; align-items: center; gap: 0.5rem; }
body:not(.pp-press-cover) .pp-pressbar__spine { display: none; }
.pp-mini { font-size: 12px; padding: 0.2rem 0.5rem; }
.pp-pressbar__calc { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding-top: 0.5rem; border-top: 1px dashed var(--pp-line); color: var(--pp-ink-2); }
.pp-pressbar__calc b { color: var(--pp-ink); }
body.pp-press-on .stage > *:not(#ppPress) { display: none !important; }
body.pp-press-on .stage { display: block; padding: 4mm 0 20mm; }
.pp-press { display: flex; flex-direction: column; align-items: center; gap: 8mm; }
.pp-sheet { position: relative; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.45); flex: none; }
.pp-trim { position: absolute; overflow: hidden; } /* 切り抜き枠＝仕上がり＋塗り足し（v1.5〜。名前は互換のため据え置き） */
.pp-scale { position: absolute; transform-origin: 50% 50%; }
.pp-scale > .page, .pp-coverrow > .page { margin: 0 !important; box-shadow: none !important; }
.pp-coverrow { display: flex; height: 100%; }
.pp-coverrow > .page { flex: none; order: 0 !important; } /* 1ページずつ表示用の order（折り物で使う）を入稿の並びに持ち込まない */
/* press.scale:false ＝デザイン側で塗り足しまで描いてある冊子。仕上がりの外へはみ出した絵柄を塗り足しとして見せる */
body.pp-press-noscale .pp-scale > .page, body.pp-press-noscale .pp-coverrow > .page { overflow: visible !important; }
.pp-spine { flex: none; height: 100%; background: repeating-linear-gradient(180deg, rgba(0,0,0,0.06) 0 6px, transparent 6px 12px); }
.pp-mark { pointer-events: none; }
@media print {
/* 入稿データの印刷: 用紙 1 枚＝ pp-sheet 1 枚。ヘッダー・設定の帯・余白はすべて消す（v1.5.1: html/body の余白と stage の並べ方を明示。
プロジェクト側の印刷 CSS（.stage を flex で並べる等）が入稿モードにも効いて用紙が横に並ぶ事故があった） */
body.pp-press-on { margin: 0 !important; padding: 0 !important; background: #fff !important; }
body.pp-press-on .pp-toolbar, body.pp-press-on .pp-pressbar, body.pp-press-on .cmt-panel, body.pp-press-on .cmt-pop, body.pp-press-on .cmt-layer { display: none !important; }
body.pp-press-on .stage { display: block !important; padding: 0 !important; margin: 0 !important; zoom: 1 !important; }
body.pp-press-on .pp-press { display: block !important; }
body.pp-press-on .pp-press { gap: 0; }
body.pp-press-on .pp-sheet { box-shadow: none; break-after: page; }
body.pp-press-on .pp-sheet:last-child { break-after: auto; }
body.pp-press-on .pp-spine { background: none; } /* 背の目印は画面だけ */
}