/* 編集で書き込む文字のフォント（IjiraleJP・IjiraleSym）は edit.js が版の印つきの URL で登録する */
/* PDF IJIRALE — docs/design-spec.md に従う。
   色・余白・角丸・影はすべてここの変数経由で使う。 */
:root{
  /* Brand：赤（白文字 4.54:1） */
  --red:#e0302b; --red-700:#c52b27; --red-50:#fdeceb; --red-100:#f9d6d5;
  /* 道具アイコン：結合・分割・編成＝橙／JPG変換＝黄 */
  --ic-org:#ee6c4d; --ic-org-t:#f5c5b3;
  --ic-yel:#d6bf2d; --ic-yel-t:#fbefa8;
  --ic-pur:#9b51c9; --ic-pur-t:#e3cdf1;
  /* Functional */
  --ok:#17804f; --ok-tx:#0f6b3d; --ok-bg:#e8f5ee; --warn:#975a00; --info:#1a62d6;
  /* Text */
  --tx-h:#33333b; --tx:#47474f; --tx2:#707078;
  /* Surface */
  --white:#ffffff; --bg:#f5f5fa; --line:#d6d6df; --line-s:#8b8b95;
  /* Shape（ボタン8px・大ボタン12px・カード16px） */
  --r-s:8px; --r-m:12px; --r-l:16px;
  /* Shadow */
  --sh-btn:0 3px 6px rgba(0,0,0,.14);
  --sh-low:0 2px 6px rgba(0,0,0,.08);
  --sh-mid:0 6px 15px rgba(0,0,0,.12);
  --sh-high:0 8px 20px rgba(0,0,0,.30);
  /* Space（4の倍数のみ） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
  /* Type（見出し42/サブ22、スマホ24/16。カード名20、説明14） */
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,-apple-system,sans-serif;
  --t-d:42px; --t-sub:22px; --t-h2:24px; --t-card:20px; --t-l1:16px; --t-l2:14px; --t-l3:12px; --t-body:16px;
  --hd-h:60px; --top-h:var(--hd-h); --side-w:340px; --dur:200ms;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); font-size:var(--t-body); line-height:1.5;
  color:var(--tx); background:var(--bg);
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
}
h1,h2,h3{margin:0; color:var(--tx-h); font-weight:600}
p{margin:0}
/* 中身が少なくてもフッターは画面の下に */
main{min-height:calc(100vh - var(--top-h))}
button{font-family:inherit; font-size:inherit; cursor:pointer; color:inherit}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--red); outline-offset:2px}

/* ================= Header（白・高さ60・下線1px） ================= */
/* ヘッダーを上に固定する */
.top{position:sticky; top:0; z-index:30}
.hd{
  height:var(--hd-h);
  background:var(--white); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--s6); padding:0 var(--s4);
}
@media(min-width:768px){ .hd{padding:0 var(--s6)} }
.logo{
  display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; text-decoration:none; color:var(--tx-h);
  font-weight:700; font-size:22px; letter-spacing:.02em; line-height:1; white-space:nowrap;
}
@media(max-width:560px){ .logo{font-size:18px} .logo-ic{width:28px; height:28px} }
.logo-ic{width:32px; height:32px; border-radius:var(--r-s); flex:none}
.hd-link{color:var(--tx-h); text-decoration:none; font-size:var(--t-l2); min-height:44px; display:inline-flex; align-items:center}
.hd-link:hover{color:var(--red)}
.hd-sp{flex:1}
.badge{
  display:inline-flex; align-items:center; gap:var(--s1); white-space:nowrap;
  background:var(--ok-bg); color:var(--ok-tx); font-size:var(--t-l3); font-weight:600;
  padding:var(--s1) var(--s3); border-radius:999px;
}
@media(max-width:560px){ .hd-link{display:none} }

/* ================= Home ================= */
.home-hd{max-width:960px; margin:0 auto; padding:var(--s10) var(--s6) var(--s8); text-align:center}
.home-hd h1{font-size:var(--t-h2); line-height:1.3}
.home-hd p{font-size:var(--t-l1); margin-top:var(--s3)}
@media(min-width:768px){
  .home-hd{padding:var(--s12) var(--s6) var(--s10)}
  .home-hd h1{font-size:var(--t-d); line-height:1.24}
  .home-hd p{font-size:var(--t-sub); line-height:1.45; margin-top:var(--s4)}
}

.tools{
  max-width:960px; margin:0 auto; padding:0 var(--s6);
  display:grid; gap:var(--s4); grid-template-columns:1fr;
}
@media(min-width:620px){ .tools{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .tools{grid-template-columns:repeat(4,1fr)} }
/* 道具のカード：白・枠線1px・角丸16・影なし。スマホはアイコンと名前を横並び、説明はその下 */
.tile{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-l);
  padding:var(--s3); text-decoration:none; color:inherit;
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"ic n" "d d";
  align-items:center; column-gap:var(--s3); row-gap:var(--s2);
  transition:box-shadow var(--dur) ease-out, transform var(--dur) ease-out;
}
.tile:hover{box-shadow:var(--sh-mid)}
.tile:active{transform:scale(.98)}
.tile .tic{grid-area:ic; width:36px; height:36px}
.tile-n{grid-area:n; font-size:var(--t-l1); font-weight:600; color:var(--tx-h)}
.tile-d{grid-area:d; font-size:var(--t-l2); color:var(--tx2); line-height:1.5}
@media(min-width:620px){
  .tile{padding:var(--s6); grid-template-columns:1fr; grid-template-areas:"ic" "n" "d"; align-items:start; align-content:start; row-gap:0; min-height:234px}
  .tile .tic{width:48px; height:48px; margin-bottom:var(--s4)}
  .tile-n{font-size:var(--t-card); margin-bottom:var(--s2)}
}

/* 道具アイコン：奥の淡い四角＋手前の濃い四角＋白い記号（自作） */
.tic .b{fill:var(--ic-org-t)} .tic .f{fill:var(--ic-org)}
.tic.yel .b{fill:var(--ic-yel-t)} .tic.yel .f{fill:var(--ic-yel)}
.tic.pur .b{fill:var(--ic-pur-t)} .tic.pur .f{fill:var(--ic-pur)}
.tic .g{fill:none; stroke:var(--white); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.tic .gf{fill:var(--white)}

.points{max-width:960px; margin:var(--s12) auto 0; padding:var(--s10) var(--s6); text-align:center}
.points h2{font-size:var(--t-h2); margin-bottom:var(--s8)}
.points-in{display:grid; gap:var(--s6); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.point{display:flex; flex-direction:column; align-items:center; gap:var(--s2)}
.point svg{color:var(--red); margin-bottom:var(--s2)}
.point b{font-size:var(--t-l1); color:var(--tx-h); font-weight:600}
.point span{font-size:var(--t-l2); color:var(--tx2)}

/* ================= 道具画面：ファイルを入れる前 ================= */
.tool-top{max-width:960px; margin:0 auto; padding:var(--s10) var(--s6) var(--s12); text-align:center}
.tool-top h1{font-size:var(--t-h2); line-height:1.3}
.tool-lead{font-size:var(--t-l1); margin:var(--s3) 0 var(--s8)}
.drop-s{font-size:var(--t-l2); color:var(--tx2); margin-top:var(--s3)}
@media(min-width:768px){
  .tool-top{padding:var(--s12) var(--s6) 80px}
  .tool-top h1{font-size:var(--t-d)}
  .tool-lead{font-size:var(--t-sub)}
}
/* 大きな赤ボタン（330×80・24px・角丸12・薄い影） */
.btn-big{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-width:min(330px,100%); min-height:80px; padding:0 var(--s12);
  background:var(--red); color:var(--white); border:0; border-radius:var(--r-m);
  font-size:var(--t-h2); font-weight:600; box-shadow:var(--sh-btn);
  transition:background var(--dur) ease-out, transform var(--dur) ease-out;
}
.btn-big:hover:not(:disabled){background:var(--red-700)}
.btn-big:active:not(:disabled){transform:scale(.98)}
.btn-big:disabled{opacity:.45; cursor:not-allowed}
@media(max-width:560px){ .btn-big{min-height:64px; font-size:20px; padding:0 var(--s6); width:100%} }

.dropov{
  position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center;
  background:var(--red-50); border:4px dashed var(--red); color:var(--red);
  font-size:var(--t-h2); font-weight:600; pointer-events:none;
}
body.dragging .dropov{display:flex}

/* ================= Button ================= */
.btn{
  min-height:44px; padding:0 var(--s4); border-radius:var(--r-s);
  border:1px solid transparent; font-weight:600; font-size:var(--t-l2);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); white-space:nowrap;
  transition:background var(--dur) ease-out, transform var(--dur) ease-out;
}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-p,.btn-d{background:var(--red); color:var(--white); min-height:52px; font-size:var(--t-l1)}
.btn-p:hover:not(:disabled),.btn-d:hover:not(:disabled){background:var(--red-700)}
.btn-s{background:var(--white); color:var(--tx-h); border-color:var(--line-s)}
.btn-s:hover:not(:disabled){background:var(--bg)}
.btn-t{background:none; color:var(--tx-h); padding:0 var(--s3)}
.btn-t:hover:not(:disabled){background:var(--white); color:var(--red)}
/* 灰色の背景の上の赤い文字は #e0302b だと4.18:1で不足するため、一段濃い赤（約5.1:1） */
.btn-t.dg{color:var(--red-700)}
.btn-t.dg:hover:not(:disabled){background:var(--red-50)}

/* ================= 道具画面：ファイルを入れた後（左にページ・右に設定と実行ボタン） ================= */
.ws{display:grid; grid-template-columns:1fr; min-height:calc(100vh - var(--top-h))}
.ws-main{padding:var(--s4) var(--s4) 160px; min-width:0}
.ws-side{background:var(--white); border-top:1px solid var(--line); padding:var(--s6) var(--s4) 160px; display:flex; flex-direction:column; gap:var(--s4)}
@media(min-width:900px){
  .ws{grid-template-columns:1fr var(--side-w)}
  .ws-main{padding:var(--s6)}
  .ws-side{
    border-top:0; border-left:1px solid var(--line);
    position:sticky; top:var(--top-h); height:calc(100vh - var(--top-h)); overflow:auto;
    padding:var(--s6);
  }
}
.side-t{font-size:var(--t-h2); text-align:center; padding-bottom:var(--s4); border-bottom:1px solid var(--line)}
.opt{display:flex; flex-direction:column; gap:var(--s4)}
/* 右欄の使い方の説明 */
.side-hint{background:var(--bg); border-radius:var(--r-s); padding:var(--s3) var(--s4); font-size:var(--t-l2); color:var(--tx); line-height:1.6; white-space:pre-line}
.fld{display:flex; flex-direction:column; gap:var(--s1); min-width:0}
.fld > label{font-size:var(--t-l2); font-weight:600; color:var(--tx-h)}
.fld > .hint{font-size:var(--t-l3); color:var(--tx2)}
input[type="text"],select{
  font-family:inherit; font-size:var(--t-body); width:100%;
  min-height:48px; padding:0 var(--s3);
  border:1px solid var(--line-s); border-radius:var(--r-s);
  background:var(--white); color:var(--tx-h);
}
.note{
  background:var(--bg); border-radius:var(--r-s); padding:var(--s3);
  font-size:var(--t-l2); border-left:4px solid var(--warn);
}

/* 右端は「＋」ボタンの場所として空けておく（重ならないように） */
.board-hd{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); align-items:center; margin-bottom:var(--s3); padding-right:56px}
.board-hd .cnt{font-weight:600; color:var(--tx-h); margin-right:var(--s2)}
.board{position:relative; min-height:240px; padding-top:var(--s2)}
.grid{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media(max-width:560px){ .grid{grid-template-columns:repeat(2,1fr); gap:var(--s3)} }
/* 「＋」ボタン（赤い丸・右上） */
.fab{
  position:absolute; top:calc(-1 * var(--s12)); right:0; z-index:2;
  width:48px; height:48px; border-radius:50%; border:0;
  background:var(--red); color:var(--white); box-shadow:var(--sh-btn);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) ease-out, transform var(--dur) ease-out;
}
.fab:hover:not(:disabled){background:var(--red-700)}
.fab:active:not(:disabled){transform:scale(.94)}
.fab:disabled{opacity:.45}

.pg{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m);
  padding:var(--s2); position:relative; cursor:grab;
  transition:transform var(--dur) ease-out, box-shadow var(--dur) ease-out;
}
.pg:hover{box-shadow:var(--sh-mid)}
.pg.sel{outline:3px solid var(--red); outline-offset:-1px}
.pg.drag{opacity:.4}
.pg.over{transform:translateY(-4px); box-shadow:var(--sh-high)}
.pg-thumb{
  width:100%; aspect-ratio:1/1.414; background:var(--bg); border-radius:4px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color:var(--tx2); font-size:var(--t-l3);
}
.pg-thumb canvas,.pg-thumb img{max-width:100%; max-height:100%; display:block; box-shadow:var(--sh-low)}
.pg-no{font-size:var(--t-l2); font-weight:600; color:var(--tx-h); text-align:center; margin-top:var(--s2)}
.pg-no .rot{font-weight:400; color:var(--tx2); font-size:var(--t-l3)}
.pg-src{font-size:var(--t-l3); color:var(--tx2); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pg-ops{display:flex; gap:var(--s1); justify-content:center; margin-top:var(--s2); flex-wrap:wrap}
.iconbtn{
  width:36px; height:36px; border-radius:50%; padding:0;
  border:1px solid var(--line); background:var(--white); color:var(--tx);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur) ease-out, color var(--dur) ease-out;
}
.iconbtn:hover{background:var(--bg); color:var(--tx-h)}
.iconbtn:active{transform:scale(.94)}
.iconbtn.del:hover{background:var(--red-50); color:var(--red); border-color:var(--red)}
.pg-chk{
  position:absolute; top:var(--s3); left:var(--s3); z-index:1;
  width:24px; height:24px; border-radius:50%;
  background:var(--white); border:2px solid var(--line-s);
  display:flex; align-items:center; justify-content:center; color:transparent;
}
.pg.sel .pg-chk{background:var(--red); border-color:var(--red); color:var(--white)}

/* 実行ボタン：PCは右欄の下、スマホは画面下に固定 */
.actbar{margin-top:auto; display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s4)}
.actbar .sum{font-size:var(--t-l2); color:var(--tx2); text-align:center}
.btn-run{width:100%; min-width:0; min-height:64px; font-size:20px; padding:0 var(--s4)}
.btn-run::after{
  content:""; width:28px; height:28px; border-radius:50%; flex:none;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0302b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
}
@media(max-width:899px){
  .actbar{
    position:fixed; left:0; right:0; bottom:0; z-index:20; margin:0;
    background:var(--white); box-shadow:0 -2px 6px rgba(0,0,0,.08);
    padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    gap:var(--s2);
  }
  .actbar .sum{font-size:var(--t-l3)}
  .btn-run{min-height:56px; font-size:18px}
}
.prog{display:flex; align-items:center; gap:var(--s3); width:100%; min-height:56px; flex-wrap:wrap; justify-content:center}
.prog-bar{flex:1; min-width:120px; height:8px; background:var(--bg); border-radius:999px; overflow:hidden}
.prog-bar > i{display:block; height:100%; width:0; background:var(--red); transition:width var(--dur) ease-out}
.prog-tx{font-size:var(--t-l2); font-weight:600; color:var(--tx-h); white-space:nowrap}

/* ================= 確認（Half sheet／PCでは中央のダイアログ） ================= */
.sheet-bg{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.4);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity var(--dur) ease-out;
}
.sheet-bg.on{opacity:1}
.sheet{
  width:100%; max-width:480px; background:var(--white);
  border-radius:var(--r-l) var(--r-l) 0 0; box-shadow:var(--sh-high);
  padding:var(--s6) var(--s6) calc(var(--s4) + env(safe-area-inset-bottom));
  transform:translateY(24px); transition:transform var(--dur) ease-out;
}
.sheet-bg.on .sheet{transform:translateY(0)}
.sheet h2{font-size:18px; margin-bottom:var(--s2)}
.sheet p{font-size:var(--t-l2); color:var(--tx2); margin-bottom:var(--s6)}
.sheet-btns{display:flex; flex-direction:column; gap:var(--s2)}
.sheet-btns .btn{width:100%}
@media(min-width:768px){ .sheet-bg{align-items:center} .sheet{border-radius:var(--r-l); padding-bottom:var(--s6)} }

/* ================= Toast ================= */
.toast{
  position:fixed; left:50%; bottom:calc(120px + env(safe-area-inset-bottom)); z-index:50;
  transform:translateX(-50%) translateY(8px);
  background:var(--white); box-shadow:var(--sh-high); border-radius:var(--r-s);
  padding:var(--s3) var(--s4); font-size:var(--t-l2); font-weight:600; max-width:calc(100% - 32px);
  opacity:0; pointer-events:none; transition:opacity var(--dur) ease-out, transform var(--dur) ease-out;
}
@media(min-width:900px){ .toast{left:calc(50% - var(--side-w) / 2); bottom:var(--s8)} }
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.ok{color:var(--ok)} .toast.ng{color:var(--red)}

/* ================= Footer ================= */
.ft{padding:var(--s6) var(--s4) var(--s10); text-align:center; color:var(--tx2); font-size:var(--t-l3); border-top:1px solid var(--line); background:var(--white)}
.ft details{margin:var(--s3) auto 0; text-align:left; max-width:760px}
.ft summary{cursor:pointer; min-height:44px; display:flex; align-items:center; justify-content:center}
.ft pre{
  white-space:pre-wrap; word-break:break-word; font-size:11px; line-height:1.5;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-s);
  padding:var(--s3); max-height:320px; overflow:auto;
}
/* 道具画面でファイルを入れた後は、フッターを出さない（右欄と実行ボタンに集中させる） */
body.working .ft{display:none}

/* ================= PDF 編集 ================= */
/* 編集の画面：上に道具の帯、その下にページを並べた「表示の枠」（枠の中だけが縦横に動く＝拡大しても画面全体はずれない） */
.ed{min-width:0; display:flex; flex-direction:column; height:calc(100vh - var(--top-h) - var(--s12)); min-height:420px}
@media(max-width:899px){ .ed{height:calc(100dvh - var(--top-h) - 150px); min-height:360px} }
.ed-bar{
  flex:none; z-index:6; margin:0 0 var(--s3);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-low);
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:center; padding:var(--s2);
}
.ed-grp{display:flex; flex-wrap:wrap; gap:var(--s1); align-items:center}
.ed-grp + .ed-grp{padding-left:var(--s3); border-left:1px solid var(--line)}
.ed-tool{flex-direction:column; gap:2px; min-width:52px; padding:var(--s1) var(--s2); font-size:var(--t-l3); line-height:1.2}
.ed-tool[aria-pressed="true"]{background:var(--red-50); color:var(--red-700)}
.ed-props{gap:var(--s2)}
.ed-sw{display:inline-flex; gap:var(--s1); align-items:center}
.ed-c{width:28px; height:28px; border-radius:50%; border:2px solid var(--white); background:var(--c); box-shadow:0 0 0 1px var(--line-s); padding:0}
.ed-c[aria-pressed="true"]{box-shadow:0 0 0 2px var(--tx-h)}
.ed-cpick{display:inline-flex; width:28px; height:28px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--line-s); cursor:pointer}
.ed-cpick input{width:44px; height:44px; margin:-8px; border:0; padding:0; cursor:pointer}
.ed-sel{display:inline-flex; align-items:center; gap:var(--s1); font-size:var(--t-l3); color:var(--tx2)}
.ed-sel select{width:auto; min-height:36px; padding:0 var(--s2)}
@media(max-width:899px){ .ed-bar{flex-wrap:nowrap; overflow-x:auto} .ed-grp{flex-wrap:nowrap} }

.ed-zoom{gap:2px}
.ed-zb{min-width:40px; padding:0 var(--s2)}
.ed-zl{min-width:48px; text-align:center; font-size:var(--t-l2); font-weight:600; color:var(--tx-h)}
#edFit[aria-pressed="true"]{color:var(--red-700)}
/* ページが枠より大きいときは横にも動かせる（左右の余白は margin:auto で取る＝はみ出しても左端が切れない） */
.ed-pages{flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:var(--s4); border-radius:var(--r-m); background:var(--bg)}
.ed-pg{position:relative; background:var(--white); box-shadow:var(--sh-mid); margin:0 auto var(--s10);
  --user-unit:1; --total-scale-factor:calc(var(--scale-factor) * var(--user-unit)); --scale-round-x:1px; --scale-round-y:1px}
.ed-cv{position:absolute; inset:0; width:100%; height:100%; display:block}
.ed-no{position:absolute; left:0; right:0; bottom:calc(-1 * var(--s6)); text-align:center; font-size:var(--t-l3); color:var(--tx2)}
/* 書き足したものを載せる面。選ぶ道具のときは指でページを送れるようにし、描く道具のときは画面が動かないようにする */
.ed-layer{position:absolute; inset:0; overflow:hidden; z-index:1; touch-action:pan-x pan-y pinch-zoom}
/* 「文字を選ぶ」のときは、書き足したものに触れず、下の文字の層で選べるようにする */
.ed-pages[data-tool="pick"] .ed-layer{pointer-events:none}
/* 「選択」で何もない所をつかむと表示が動く（手のひら） */
.ed-pages[data-tool="select"] .ed-layer{cursor:grab}
.ed-pages.panning .ed-layer,.ed-pages.panning .ed-o{cursor:grabbing}
/* スクロールバーを常に見せる（Mac は動かしている間しか出ないため、横に動かせることが分からない） */
.ed-pages::-webkit-scrollbar{width:14px; height:14px}
.ed-pages::-webkit-scrollbar-thumb{background:var(--line-s); border-radius:999px; border:3px solid var(--bg)}
.ed-pages::-webkit-scrollbar-thumb:hover{background:var(--tx2)}
.ed-pages::-webkit-scrollbar-track,.ed-pages::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){ .ed-pages{scrollbar-color:var(--line-s) transparent} }
.ed-pages:not([data-tool="select"]):not([data-tool="pick"]) .ed-layer{touch-action:none; cursor:crosshair}
.ed-pages[data-tool="text"] .ed-layer{cursor:text}
.ed-o{position:absolute; touch-action:none; cursor:move; box-sizing:border-box}
.ed-o.sel{outline:2px dashed var(--red); outline-offset:3px}
.ed-text{
  font-family:IjiraleJP,IjiraleSym,var(--font); line-height:1.4; white-space:pre; padding:0; margin:0;
  min-width:1em; min-height:1.4em;
}
.ed-text.editing{cursor:text; outline:2px solid var(--red); outline-offset:3px; caret-color:var(--red)}
.ed-image img{width:100%; height:100%; display:block; pointer-events:none; user-select:none}
.ed-rect,.ed-ellipse{border-style:solid}
.ed-ellipse{border-radius:50%}
.ed-mark{opacity:.35; mix-blend-mode:multiply}
.ed-line,.ed-pen{pointer-events:none}
.ed-line svg,.ed-pen svg{display:block; overflow:visible}
.ed-line path,.ed-pen path{fill:none; stroke-linecap:round; stroke-linejoin:round; pointer-events:none}
.ed-line path.hit,.ed-pen path.hit{stroke:transparent; pointer-events:stroke; cursor:move}
.ed-line.sel,.ed-pen.sel{outline-offset:1px}
/* 元の文字の層（pdf.js 6.3.289 web/pdf_viewer.css の .textLayer と回転の規則を、入れ子なしの形に写したもの） */
.ed-txt{
  color-scheme:only light; position:absolute; text-align:initial; inset:0; overflow:clip; opacity:1;
  line-height:1; letter-spacing:normal; word-spacing:normal; -webkit-text-size-adjust:none; text-size-adjust:none;
  forced-color-adjust:none; transform-origin:0 0; caret-color:CanvasText; z-index:0;
  --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size));
}
.ed-txt :is(span,br){color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; -webkit-user-select:text; user-select:text}
.ed-txt > :not(.markedContent), .ed-txt .markedContent span:not(.markedContent){
  z-index:1; --font-height:0; font-size:calc(var(--text-scale-factor) * var(--font-height));
  --scale-x:1; --rotate:0deg; transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
}
.ed-txt .markedContent{display:contents}
.ed-txt span[role="img"]{-webkit-user-select:none; user-select:none; cursor:default}
.ed-txt ::selection{background:rgba(0,0,255,.25); color:transparent}
.ed-txt br::selection{background:transparent}
.ed-txt .endOfContent{display:block; position:absolute; inset:100% 0 0; z-index:0; cursor:default; -webkit-user-select:none; user-select:none}
.ed-txt.selecting .endOfContent{top:0}
.ed-txt[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}
.ed-txt[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}
.ed-txt[data-main-rotation="270"]{transform:rotate(270deg) translateX(-100%)}
/* ⌘C／⌘V の受け皿（見えない・押せない） */
.ed-catch{position:fixed; left:-9999px; top:0; width:1px; height:1px; opacity:0; pointer-events:none; resize:none}
/* 大きさを変える角（指でもつまめる大きさ） */
.ed-h{position:absolute; right:-10px; bottom:-10px; width:16px; height:16px; background:var(--white); border:2px solid var(--red); border-radius:var(--s1); cursor:nwse-resize}
@media(pointer:coarse){ .ed-h{width:24px; height:24px; right:-14px; bottom:-14px} }

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .btn:active:not(:disabled),.btn-big:active:not(:disabled),.tile:active,.iconbtn:active,.fab:active{transform:none}
}