/* 朱筆2 の見た目。**色は一か所（:root）で決める。** */
:root{
  --bg:#e9eef1; --bar:#fff; --panel:#f6fafb; --line:#ccd7dd;
  --fg:#141a1f; --fg2:#63727b; --acc:#1a8fa8; --accfg:#fff; --warn:#c0392b;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#191c22; --bar:#232733; --panel:#1f232b; --line:#39404f;
         --fg:#e7eaf0; --fg2:#95a0b1; --acc:#4f9ddb; --accfg:#fff; --warn:#e8776a; }
}
*{box-sizing:border-box}
/* **`hidden` を必ず効かせる。**（2026-09-09 に踏んだ）
   `#stage` に `display:grid` を書いてあるので、`hidden` 属性だけでは消えなかった。
   検査は `el.hidden === true` を見て「隠れた」と答えていたが、**画面には出ていた。** */
[hidden]{display:none !important}
html,body{height:100%;margin:0}
body{font:13px/1.5 system-ui,-apple-system,"Segoe UI","Noto Sans JP",sans-serif;
  color:var(--fg);background:var(--bg);
  display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:1fr;height:100vh}
button,select,input{font:inherit;color:inherit}
button{background:var(--bar);border:1px solid var(--line);border-radius:6px;
  padding:4px 10px;cursor:pointer}
button:hover{border-color:var(--acc)}
button.on{background:var(--acc);color:var(--accfg);border-color:var(--acc)}
button.primary{background:var(--acc);color:var(--accfg);border-color:var(--acc);font-weight:600}
button:disabled{opacity:.45;cursor:default}
input[type=number],input[type=text]{background:var(--bar);border:1px solid var(--line);
  border-radius:5px;padding:3px 6px;width:5.5em}

#top{grid-row:1;display:flex;gap:6px;align-items:center;padding:6px 10px;
  background:var(--bar);border-bottom:1px solid var(--line);flex-wrap:wrap}
#top .name{font-weight:700;letter-spacing:.02em}
#top .name span{opacity:.55;font-size:.8em;font-weight:400;margin-left:4px}
#top .grow{flex:1}

#tabs{grid-row:2;display:flex;gap:2px;padding:4px 10px 0;background:var(--bar);
  border-bottom:1px solid var(--line);overflow-x:auto}
#tabs button{border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom-color:transparent;white-space:nowrap}
#tabs button.on{background:var(--panel);color:var(--fg);border-color:var(--line);
  border-bottom-color:var(--panel);font-weight:600}

#ribbon{grid-row:3;grid-column:1;display:none}
#main{grid-row:3;display:grid;grid-template-columns:190px 1fr;min-height:0}
#side{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:8px}
#side .empty{color:var(--fg2);font-size:12px;padding:12px 4px}
#thumbs{display:flex;flex-direction:column;gap:8px}
.thumb{position:relative;background:var(--bar);border:2px solid var(--line);border-radius:6px;
  padding:6px;display:flex;justify-content:center;cursor:pointer}
.thumb.on{border-color:var(--acc)}
.thumb canvas{max-width:100%;height:auto;background:#fff}
.thumb .no{position:absolute;right:4px;bottom:2px;font-size:11px;color:var(--fg2)}
.thumb .pick{position:absolute;left:4px;top:4px}

#work{display:grid;grid-template-rows:auto 1fr;min-height:0}
#bar{display:flex;gap:6px;align-items:center;padding:6px 10px;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--line);min-height:38px}
#bar .sep{width:1px;height:20px;background:var(--line);margin:0 2px}
#bar label{color:var(--fg2);font-size:11px}
/* **紙は真ん中に置くが、はみ出したら左上から見せる。**
   `place-items:center` だけだと、拡大して紙が窓より大きくなったとき
   上と左がはみ出したまま**巻き取っても戻れない**（負の位置に置かれる）。
   `safe` を付けると、収まらないときだけ端寄せに切り替わる。 */
#stage{overflow:auto;display:grid;grid-auto-columns:min-content;
  justify-content:safe center;align-content:safe center;padding:20px;background:var(--bg)}
#sheet{position:relative;line-height:0;box-shadow:0 2px 12px rgba(0,0,0,.18)}
/* **`max-width:100%` は置かない。**置くと拡大しても窓の幅で頭を打ち、
   紙だけ縮んで重ねの層とずれる。はみ出す分は #stage が巻き取る。 */
#page{background:#fff;display:block}
/* **注釈は紙の上の別の層に描く。**紙は pdf.js が描いたままにしておく。 */
#ink{position:absolute;left:0;top:0;display:block}
body.annot #ink{cursor:crosshair}

#status{grid-row:4;display:flex;gap:12px;align-items:center;padding:4px 10px;
  background:var(--bar);border-top:1px solid var(--line);color:var(--fg2);font-size:11px}
#status .grow{flex:1}

#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);
  background:rgba(20,26,31,.92);color:#fff;padding:8px 16px;border-radius:8px;
  opacity:0;transition:opacity .18s;pointer-events:none;max-width:80vw;z-index:50}
#toast.on{opacity:1}
#toast.warn{background:var(--warn)}

/* 説明タブ。**読ませるものなので、幅を詰めて行間を広く取る。** */
#doc{grid-row:2;overflow-y:auto;padding:24px 28px;max-width:820px;line-height:1.75}
#doc h2{font-size:17px;margin:1.8em 0 .5em;padding-bottom:.25em;border-bottom:1px solid var(--line)}
#doc h2:first-child{margin-top:0}
#doc h3{font-size:14px;margin:1.3em 0 .35em;color:var(--acc)}
#doc p{margin:.5em 0}
#doc pre{background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:8px 10px;overflow-x:auto;font-size:12px;margin:.5em 0}
#doc code{background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:1px 4px;font-size:.92em}
#doc pre code{background:none;border:none;padding:0}

/* OCR タブ。**囲いで範囲を示す。**「2つまで」は文章ではなく見出しに置く。 */
.ocr-set{border:1px solid var(--line);border-radius:6px;margin:0;padding:1px 8px 3px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* **帯は折り返す。**英語表示は語が長く、幅 1300px で断り書きが右端に押し込まれて
   一語ずつ縦に並び、帯が縦に伸びた（v6 を出す前の点検で発見。v5 の英語も同じ）。 */
.ocr-set legend{color:var(--fg2);font-size:11px;padding:0 4px}
.ocr-set label{display:inline-flex;align-items:center;gap:2px;color:var(--fg);font-size:12px;
  white-space:nowrap;cursor:pointer}
.ocr-set:disabled{opacity:.5}
/* **囲いの中の釦を縮めない。**文字修正の帯の下段に入れたとき、
   幅が足りずに「やめる」が縦一列になった（v5 で踏んだ）。 */
.ocr-set>button{flex:none;white-space:nowrap}
.ocr-set>fieldset{flex:none}
.ocr-say{color:var(--fg2);font-size:12px;min-width:8em}
/* file:// で開いたときの断り書き。**帯の中で折り返させる**——
   一行に伸ばすと倍率の欄が押し出されて見えなくなる。 */
.ocr-note{color:var(--warn,#a05000);font-size:12px;line-height:1.35;max-width:34em;
  white-space:normal;flex:1 1 18em}
.ocr-meter{width:140px;height:10px}

/* ---- 小さな窓（しおり・リンク・添付）。**紙を見ながら触れるように浮かせる。** ---- */
dialog.panel{position:fixed;right:14px;bottom:46px;top:auto;left:auto;margin:0;
  width:310px;max-height:66vh;padding:0;border:1px solid var(--line);border-radius:10px;
  background:var(--bar);color:var(--fg);box-shadow:0 8px 30px rgba(0,0,0,.30);
  display:none;flex-direction:column;overflow:hidden;z-index:40}
dialog.panel[open]{display:flex}
dialog.panel::backdrop{background:none}
.panel header{display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;
  background:var(--panel);border-bottom:1px solid var(--line);font-size:12px}
.panel header .grow{flex:1}
.panel .body{overflow-y:auto;padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px}
.panel .prow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.panel .prow button{padding:3px 7px;font-size:12px}
.panel .prow input[type=text].wide{flex:1;width:auto;min-width:8em}
.panel .hint{color:var(--fg2);font-size:11px;flex:1}
.panel .empty{color:var(--fg2);font-size:12px;margin:6px 2px}
.panel .tree{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:6px}
.panel .row{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:5px;
  cursor:pointer;min-height:24px}
.panel .row:hover{background:var(--panel)}
.panel .row.sel{background:var(--acc);color:var(--accfg)}
.panel .row .lab{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel .row .lab.gone{opacity:.5;text-decoration:line-through}
.panel .row input.lab{width:100%;min-width:0}
.panel .row .no{font-size:11px;color:var(--fg2);min-width:1.6em;text-align:right}
.panel .row.sel .no{color:var(--accfg)}
.panel .row .no.gone{color:var(--warn)}
.panel .row .tw{border:none;background:none;padding:0;width:14px;font-size:10px;color:var(--fg2)}
.panel button.x{border:none;background:none;padding:0 4px;color:var(--fg2);font-size:14px;line-height:1}
.panel button.x:hover{color:var(--warn)}
.panel .row.sel button.x{color:var(--accfg)}

/* ---- リンクの四角。**引いた場所が見えないと、当たり判定はただの空白になる。** ---- */
#over{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#over.draw{pointer-events:auto;cursor:crosshair}
#over .lnk{position:absolute;border:1.5px solid var(--acc);
  background:color-mix(in srgb,var(--acc) 12%,transparent);border-radius:2px}
#over .lnk.other{border-style:dashed}
#over .lnk.sel{border-width:2.5px;background:color-mix(in srgb,var(--acc) 26%,transparent)}
#over .marquee{position:absolute;border:1.5px dashed var(--acc);
  background:color-mix(in srgb,var(--acc) 16%,transparent)}

/* ---- 墨消しの囲い。**リンクとは別の層に置く。**
       リンク側の paintOverlay は #over の中身を丸ごと作り直すので、
       同じ層に入れると囲いが黙って消える。 ---- */
#redover{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#redover.draw{pointer-events:auto;cursor:crosshair}
#redover .rdc{position:absolute;border:2px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 18%,transparent);pointer-events:auto;cursor:pointer}
#redover .rdc.sel{border-width:3px;background:color-mix(in srgb,var(--warn) 34%,transparent)}
/* **白で塗る囲いは、紙と見分けが付かない。**画面の側だけ、白い斜めの縞と
   破線の枠を掛けて「ここは白で塗る」と分かるようにする。
   **この印は画面の層にしかない。書き出す PDF には入らない。** */
#redover .rdc.white{border-style:dashed;
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,.80) 0 5px, color-mix(in srgb,var(--warn) 22%,transparent) 5px 10px)}
#redover .rdc.white.sel{border-width:3px;
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,.88) 0 5px, color-mix(in srgb,var(--warn) 42%,transparent) 5px 10px)}
/* **黒で塗る囲いは、黒く見せる。**色の違いを、文字ではなく見た目で出す。 */
#redover .rdc.black{background:color-mix(in srgb,#000 30%,transparent)}
#redover .rdc.black.sel{background:color-mix(in srgb,#000 52%,transparent)}
#redover .marquee{position:absolute;border:2px dashed var(--warn);
  background:color-mix(in srgb,var(--warn) 20%,transparent)}
/* 墨消しの窓。**中身の一覧と「実行」を続けて置く**ので、
   何を消すのかを見ないまま押せる並びにならない。 */
.panel .rdhead{font-size:11px;color:var(--fg2);margin:4px 2px 0}
.panel .rdwarn{font-size:11px;color:var(--warn);margin:2px 2px 4px}
#pn-rd .row .lab.gone{opacity:.6;text-decoration:none;font-style:italic}
/* ---- 塗りの色の切り替え。**消す釦ではなく、必ずどちらかが点いている二択。** ----
       色の名前を字で書くだけにせず、**釦そのものを黒と白で塗る。**
       白い釦は紙と同じ色なので、枠を残して「ここに面がある」と分かるようにする。 */
.panel .rdfill{align-items:center;gap:6px;margin:6px 0 0}
.panel .rdfill .flab{font-size:11px;color:var(--fg2)}
button.sw{padding:3px 12px;font-size:12px}
button.sw-black{background:#1b1b1b;color:#fff;border-color:#1b1b1b}
button.sw-white{background:#fff;color:#333;border-color:var(--line)}
button.sw.on{outline:2px solid var(--acc);outline-offset:1px;font-weight:700}
button.sw.one{padding:1px 6px;min-width:22px;line-height:1.3;margin-right:2px}
#bar button.sw{padding:3px 10px}
#pn-rd button.widebtn{margin-top:8px;padding:6px 10px}

/* ---- 文字修正の層（v5）。**墨消し（#redover）ともリンク（#over）とも別の層。**
       字ごとに箱を置いて、なぞって選べるようにする。
       **枠線は普段出さない。**全部に線を引くと紙が読めなくなる——
       触れたところと選んだところにだけ色を付ける。 ---- */
#txtover{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#txtover:not([hidden]){pointer-events:auto;cursor:text}
#txtover .tg{position:absolute;border-radius:1px}
#txtover .tg:hover{background:color-mix(in srgb,var(--acc) 18%,transparent)}
#txtover .tg.sel{background:color-mix(in srgb,var(--acc) 38%,transparent);
  outline:1px solid var(--acc)}
/* 当てる前の直しが付いている字。**下に線を引いて、押す前から見えるようにする。** */
#txtover .tg.done{box-shadow:inset 0 -2px 0 var(--warn)}
.panel .txsel{font-size:13px;font-weight:600;word-break:break-all}
.panel .txwarn{color:var(--warn);font-size:12px;margin:6px 2px}
.panel .txfont{color:var(--fg2);font-size:11px;margin:4px 2px 0;min-height:1em}
.panel .txfont.swap{color:var(--warn)}
#pn-tx button.widebtn{margin-top:8px;padding:6px 10px;width:100%}

/* 保存名の欄。**保存ボタンの隣。**空なら元のファイル名から作る。 */
.name-box{width:11em}
.name-box::placeholder{color:var(--fg2);opacity:.7}

/* 二つのうち一つを選ぶ組。**囲って、まとまりであることを見せる。** */
.pick2{display:inline-flex;gap:0;border:1px solid var(--acc);border-radius:6px;overflow:hidden}
.pick2 button{border:none;border-radius:0}
.pick2 button+button{border-left:1px solid var(--line)}

/* ---- 「絵も塗り潰す」の囲い。**効く範囲を線で示す。**
       文章で「これは絵にも効きます」と断るより、囲ってあるほうが早い。
       囲いの下に絵がある紙が一枚でもあれば、色が付く（`.live`）。 ---- */
.panel .rdbox{border:1px solid var(--line);border-radius:5px;padding:6px 8px;margin:8px 0 0}
.panel .rdbox.live{border-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.panel .rdbox .ttl{display:flex;gap:6px;align-items:flex-start;font-size:12px;cursor:pointer}
.panel .rdbox .ttl input{margin:2px 0 0}
.panel .rdbox .hint{display:block;flex:none;margin:4px 0 0}

/* ---- フォームの欄。**紙の上に薄い枠を重ねる。**
       リンク（#over）とも墨消し（#redover）とも別の層にする——
       どちらも自分の層を丸ごと作り直すので、相乗りすると黙って消える。 ---- */
#formover{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#formover .fmw{position:absolute;border:1.5px solid var(--acc);border-radius:2px;
  background:color-mix(in srgb,var(--acc) 10%,transparent);
  pointer-events:auto;cursor:pointer}
#formover .fmw:hover{background:color-mix(in srgb,var(--acc) 22%,transparent)}
/* 値を入れた欄は塗りを濃くする。**どこを埋めたかが紙の上で分かる。** */
#formover .fmw.done{border-color:#2e9e6b;
  background:color-mix(in srgb,#2e9e6b 20%,transparent)}
#formover .fmw.ro{border-style:dashed;background:none}
#formover .fmw.sel{border-width:3px}

/* 欄の一覧。**名前と入力欄を一行に並べる。**名前が長い PDF が多いので、
   名前は詰めて、入れる場所を広く取る。 */
.panel .fmtree{gap:2px}
.panel .fmrow{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:5px;
  min-height:26px}
.panel .fmrow:hover{background:var(--panel)}
.panel .fmrow.sel{background:color-mix(in srgb,var(--acc) 18%,transparent)}
.panel .fmrow.dead{opacity:.55}
.panel .fmrow .fmlab{flex:0 0 8.5em;font-size:11px;color:var(--fg2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.panel .fmrow .fmin{flex:1;width:auto;min-width:4em}
.panel .fmrow textarea.fmin{height:3.4em;resize:vertical;background:var(--bar);
  border:1px solid var(--line);border-radius:5px;padding:3px 6px}
.panel .fmrow .fmck{flex:0 0 auto;margin:0}
.panel .fmrow .fmno{flex:1;font-size:11px;color:var(--fg2);font-style:italic}
.panel .fmrow .fmtag{font-size:10px;color:var(--warn);white-space:nowrap}
.panel button.widebtn{margin-top:8px;padding:6px 10px}
/* 「保存すると焼き付けます」は、道具立ての帯でも見えるようにする。 */
#bar label.fmburn{color:var(--warn);font-weight:600}
/* 枠の中に、入れた値をそのまま出す。**紙と一覧を目でつなぐ。** */
#formover .fmw{display:flex;align-items:center;overflow:hidden}
#formover .fmw .fmv{padding:0 2px;color:#14503a;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@media (prefers-color-scheme: dark){ #formover .fmw .fmv{color:#0b3527} }
.panel .fmrow .fmtag.mild{color:var(--fg2)}

/* ---- 倍率。**紙のすぐ上、道具の帯の右端に置く。**
       「いま見えている紙をどれだけ大きくするか」の話なので、
       別の窓や下の帯に離すと、押したときに何が変わるのか目で追えない。
       ＋と−の間に倍率を挟むと、三つで一つの操作に見える。 ---- */
#bar .zoomg{margin-left:auto;display:inline-flex;gap:4px;align-items:center;flex:none}
#bar .zoomg button{padding:3px 8px;min-width:28px}
.zoom-box{width:4.6em;text-align:center}
#bar .zoomg .pick2{margin-left:4px}
#bar .zoomg .pick2 button{padding:3px 8px}

/* ---- 絵を直す（v3）。**リンク・墨消し・フォームとは別の層にする。**
       どれも自分の層を丸ごと作り直すので、相乗りすると黙って消える。

       枠は紙の上に必ず出す。**「押せます」と書くかわりに、押せるものを見せる。**
       直せない絵（透け付き・大きすぎる）は破線にして、押しても何も起きないことを先に示す。 ---- */
#imgover{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
#imgover svg.frames{position:absolute;left:0;top:0;overflow:visible}
#imgover polygon.fr{fill:color-mix(in srgb,var(--acc) 8%,transparent);
  stroke:var(--acc);stroke-width:1.5;stroke-dasharray:6 4;cursor:pointer;pointer-events:auto}
#imgover polygon.fr:hover{fill:color-mix(in srgb,var(--acc) 18%,transparent)}
/* **選んだ絵の枠は、下見の上に出す。**下に敷くと、下見の canvas が枠を覆って
   「どれを選んでいるか」が紙の上で見えなくなる（便が目で見て気づいた）。
   そのぶん塗りは外す——塗ったままだと下見の色が変わってしまう。 */
#imgover polygon.fr.sel{stroke-width:3;stroke-dasharray:none;fill:none}
#imgover polygon.fr.dead{stroke:var(--fg2);fill:none;cursor:default;stroke-dasharray:3 3}
/* 下見の絵。**元の絵の真上に、同じ行列で重ねる。**
   `image-rendering` は既定のまま——縮小して見せることが多く、
   ピクセル表示にすると元の紙より粗く見えて、直す前と比べられない。 */
#imgover canvas.prev{position:absolute;left:0;top:0}

/* 絵の窓。つまみは一行に収める。**数字を右端に出す**ので、
   下見を切っていても何％が入るのかが見える。 */
/* **効いている囲いには色を付ける。**ただし赤ではない——
   墨消しの `.rdbox.live` が赤いのは「戻せない操作が待っている」からで、
   つまみと消しゴムは確定するまで何も起きない。**同じ赤にすると警告の重みが薄れる。**
   赤を使うのは、上書きが他のページにも及ぶと分かっている囲い（`.imgwide`）だけにする。 */
.panel .imgbox{margin:8px 0 0}
.panel .imgbox.live{border-color:var(--acc);
  background:color-mix(in srgb,var(--acc) 8%,transparent)}
.panel .imgbox.imgwide.live{border-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.panel .imgrow{display:flex;gap:6px;align-items:center;margin:4px 0}
.panel .imgrow label{flex:0 0 6.6em;font-size:11px;color:var(--fg2);white-space:nowrap}
.panel .imgrow input[type=range]{flex:1;min-width:6em}
.panel .imgval{flex:0 0 3.4em;text-align:right;font-size:11px;color:var(--fg2)}
.panel .imgbox .prow .grow{flex:1}
.panel .row.imgpick{display:flex;align-items:center;padding:3px 4px;border-radius:5px;
  cursor:pointer;font-size:12px}
.panel .row.imgpick:hover{background:var(--panel)}
.panel .row.imgpick.sel{background:color-mix(in srgb,var(--acc) 18%,transparent)}
.panel .row.imgpick.dead{opacity:.6;cursor:default}
.panel .row.imgpick .lab{color:var(--fg);flex:1;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#pn-im button.widebtn{margin-top:8px;padding:6px 10px;width:100%}