@import url('/task-info.css');
/* Noto は PDF に書き込む書体(記入欄 .form-field とページ番号・透かしの下見)だけに使う。本文は端末の書体(2026-09-27 ユーザー指示。以前は本文も 5.7MB の Noto を読んでいた) */@font-face{font-family:Noto;src:url('/fonts/NotoSansJP.ttf')}*{box-sizing:border-box}body{margin:0;color:#203047;background:#fff;font:14px Roboto,"Noto Sans JP",system-ui,sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer;border:1px solid transparent;border-radius:7px;background:transparent;padding:7px 11px;white-space:nowrap}button:hover{background:#e9edf3}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #8171d3;outline-offset:2px}.primary{background:#253247;color:white;padding:10px 20px}.primary:hover{background:#3c4b62}.soft{background:#f1f3f6}.danger{color:#c44949}header{height:54px;display:flex;align-items:center;gap:7px;padding:0 22px}a{color:inherit;text-decoration:none}.brand{font-size:23px;font-weight:650}.app-name{font-size:23px}#services{margin-left:auto;font-size:12px;color:#74869d}main{padding:0 20px}.toolbar,.workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0}.tools{display:flex;align-items:center;gap:6px}#count{font-size:12px;color:#73839a;margin-right:12px}#empty{text-align:center;padding:90px 20px}h1{font-size:28px;font-weight:600}p{line-height:1.9}.paper-icon{margin:auto;border:1px solid #cdd6e3;border-radius:10px;width:70px;height:90px;display:grid;place-items:center;color:#7f719c;background:#faf8fe;font-weight:600}.privacy,.hint{font-size:12px;color:#74839a}.privacy{margin-top:24px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:24px}.pages-area{background:transparent;border:0;border-radius:0;min-height:65vh;padding:14px 20px}.pages-area>.hint{margin:0 0 14px}#pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:20px;align-content:start}.page-card{min-width:0;position:relative;cursor:grab;padding:9px;border-radius:9px;border:2px solid transparent;user-select:none}.page-card.selected{border-color:#8974dc;background:#eeebfa}.page-card:active{cursor:grabbing}.page-card canvas{max-width:100%;height:auto;display:block;margin:auto;background:white;box-shadow:0 2px 8px #24334b14}.page-card .caption{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px}.page-card .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-card .page-number{margin-left:auto;font-variant-numeric:tabular-nums}aside{padding:5px 0}h2{font-size:15px;font-weight:550;margin:0 0 16px}.wide{width:100%;border-color:#dce2eb}fieldset{border:1px solid #e0e5ed;border-radius:8px;margin:22px 0 12px;padding:12px}legend{padding:0 5px}label{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:12px}label input:not([type=checkbox]):not([type=range]):not([type=color]),select{min-width:0;border:1px solid #d5dde8;border-radius:6px;padding:7px;width:100%;background:white}input[type=checkbox]{accent-color:#7e6bc0}input[type=range]{width:100%;accent-color:#7386a1;cursor:grab}input[type=range]:active{cursor:grabbing}input[type=color]{width:38px;height:30px;padding:2px;border:1px solid #d5dde8;border-radius:5px;background:white}fieldset label{justify-content:space-between}fieldset input:not([type=checkbox]),fieldset select{max-width:135px}#selection{color:#728299;font-size:12px}dialog{border:1px solid #dce2eb;border-radius:12px;padding:22px;color:inherit;max-height:94vh}dialog::backdrop{background:#17233466}#editor{width:min(1100px,95vw)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-heading h2{margin:0}.dialog-heading button{font-size:22px}.edit-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.edit-tools label{margin:0}.edit-tools #text-value{width:180px}.edit-tools input[type=number]{width:65px}.edit-tools input:disabled{opacity:.4}#stage-wrap{overflow:auto;background:#eef1f5;padding:24px;max-height:62vh}#stage{position:relative;width:fit-content;margin:auto;box-shadow:0 2px 12px #24334b20;background:white}#page-canvas{display:block}#overlays{position:absolute;inset:0}.overlay{position:absolute;white-space:pre;cursor:grab;touch-action:none;line-height:1.15;user-select:none;border:1px solid transparent;transform-origin:top left}.overlay.selected{border-color:#8164d4}.overlay:active{cursor:grabbing}.overlay img{display:block;width:100%;height:100%;pointer-events:none}.dialog-footer{text-align:right;margin-top:16px}#export-dialog{width:370px}#export-dialog>label{display:block}#export-dialog>label>input:not([type=checkbox]),#export-dialog>label>select{display:block;margin-top:6px}#error{background:#fff0f0;color:#a43636;border-radius:8px;padding:12px 18px;white-space:pre-line}#notice{background:#f3f5fb;color:#4b5a75;border-radius:8px;padding:10px 18px;font-size:13px}#busy{position:fixed;inset:0;background:#ffffffcf;z-index:100;display:flex;align-items:center;justify-content:center;gap:12px}.spinner{width:22px;height:22px;border:2px solid #e0e5ee;border-top-color:#7a68c7;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}@media(max-width:760px){main{padding:0 12px}.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}aside h2,aside>.hint{grid-column:1/-1}fieldset{margin:0}.workspace-bar{flex-wrap:wrap}.workspace-bar .tools{flex-wrap:wrap}#pages{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}#empty{padding-top:45px}h1{font-size:22px}.toolbar{flex-wrap:wrap}.edit-tools{gap:4px}#stage-wrap{padding:8px}header{padding:0 12px}}

.dialog-error,.password-error{color:#a43636;background:#fff0f0;border-radius:6px;padding:10px;font-size:12px}

.thumb{height:190px;display:flex;align-items:center;justify-content:center}.thumb canvas{max-height:190px;max-width:100%;object-fit:contain}.page-card{align-self:start}@media(max-width:760px){aside{grid-template-columns:1fr}aside h2,aside>.hint{grid-column:1}.toolbar{gap:5px}.toolbar button{padding-left:8px;padding-right:8px}#count{margin-right:3px}.toolbar .primary{padding:9px 12px}}

#image-import-settings{margin:4px 0 12px;font-size:12px;color:#74839a}#image-import-settings .tools{flex-wrap:wrap}#image-import-settings input{max-width:70px}summary{cursor:pointer;width:fit-content}#groups{display:block;width:100%;font:inherit;padding:8px;border:1px solid #d5dde8;border-radius:6px;resize:vertical}.quick-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.quick-actions button{font-size:12px;color:#74839a}

#feature-menu{margin:8px 0 16px;font-size:12px;color:#63758b}#feature-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px;margin:12px 0}#feature-links a{padding:10px 14px;background:#f4f6f9;border-radius:7px}#feature-links a:hover,#feature-links a[aria-current]{background:#ece8f8;color:#56478a}.feature-heading{margin:12px 0 0;font-size:16px;font-weight:550}

/* アプリ共通のヘッダー書式（サムネイルと同じ寸法・書体）。 */
@font-face{font-family:"Noabase Brand";src:url('/assets/shared/fonts/NotoSansJP-ui.woff2') format('woff2');font-weight:600 700;font-display:swap}
header.site-header{height:53.25px;min-height:53.25px;padding:0 32px;gap:20px;justify-content:space-between;color:#222b38;line-height:1.5}
header.site-header .brand{font-family:"Noabase Brand",sans-serif;font-synthesis:none;font-size:23px;font-weight:650;letter-spacing:-.04em;line-height:1.5;white-space:nowrap;color:inherit;text-decoration:none}
.site-header #services{font-family:system-ui,"Yu Gothic",sans-serif;font-size:13px;font-weight:600;line-height:20px;letter-spacing:normal;color:#111;padding:12px 0 12px 16px;white-space:nowrap}
.site-header #services:hover{color:#222b38;text-decoration:none}
@media(max-width:650px){header.site-header{height:49.5px;min-height:49.5px;padding:0 16px;gap:8px;flex-wrap:nowrap}header.site-header .brand{flex:1;font-size:18px}.site-header #services{font-size:12px;padding-left:4px}}

/* 追記の幅・改行とキーボード操作。 */
.overlay{border:0;outline:1px solid transparent}.overlay.selected{outline-color:#8164d4}.overlay:focus-visible{outline:2px solid #5d45aa;outline-offset:2px}.text-overlay{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;min-height:1.15em}#text-value{font:inherit;color:inherit;border:1px solid #d5dde8;border-radius:6px;padding:7px;resize:vertical;max-width:100%}#text-value:focus-visible{outline:2px solid #8171d3;outline-offset:2px}#text-value:disabled{opacity:.4}#overlay-warning{color:#934312;background:#fff4df;padding:8px 12px;font-size:12px}

.text-overlay{white-space:pre;overflow-wrap:normal;word-break:normal;min-height:1.35em}

/* 用途から探す機能ナビゲーション。 */
#feature-menu{margin:8px 0 16px;color:#263446}
#feature-menu>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:8px;font-size:13px;font-weight:600;background:#f5f6f8}
#feature-menu>summary::-webkit-details-marker{display:none}
#feature-menu>summary:hover{background:#eceff3}
.feature-menu-chevron{display:inline-block;font-size:18px;line-height:1;transition:transform .15s}
#feature-menu[open] .feature-menu-chevron{transform:rotate(180deg)}
#feature-links{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:0;margin:12px 0 0;padding:20px 24px;background:#fafbfc;border:1px solid #e6e9ee;border-radius:12px;max-height:55vh;overflow:auto}
#feature-links .feature-overview{grid-column:1/-1;justify-self:start;padding:0 0 4px;margin-bottom:16px;border-radius:0;background:none;font-size:12px;color:#59677a;border-bottom:1px solid transparent}
#feature-links .feature-overview:hover{border-color:#59677a}
.feature-group{min-width:0;padding:0 22px;border-left:1px solid #e4e8ee}
.feature-group:first-of-type{padding-left:0;border-left:0}
.feature-group:last-child{padding-right:0}
.feature-group h3{margin:0 0 10px;font-size:calc(11px + 1pt);letter-spacing:.06em;font-weight:600;color:#697689}
.feature-group-links{display:grid;gap:4px}
.feature-group:first-of-type .feature-group-links{grid-template-columns:repeat(2,minmax(0,1fr))}
#feature-links .feature-group a{display:flex;align-items:center;gap:10px;padding:9px 10px;min-height:42px;border-radius:7px;background:transparent;font-size:calc(13px + 1pt);color:#263446}
#feature-links .feature-group a:hover{background:#edf0f5;color:#182539}
#feature-links a[aria-current=page]{background:#ebe7f6;color:#59428c}
#feature-links .feature-overview[aria-current=page]{background:none;color:#59428c}
#feature-links svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feature-selected{margin-left:auto;font-size:12px;visibility:hidden}
[aria-current=page] .feature-selected{visibility:visible}
@media(max-width:1000px){#feature-links{grid-template-columns:1fr 1fr 1fr;padding:16px}.feature-group{padding:0 12px}.feature-group:first-of-type .feature-group-links{grid-template-columns:1fr}}
@media(max-width:620px){#feature-links{grid-template-columns:1fr;gap:16px;padding:16px;max-height:55vh}.feature-group,.feature-group:first-of-type{padding:0;border:0}.feature-group-links,.feature-group:first-of-type .feature-group-links{grid-template-columns:repeat(2,minmax(0,1fr))}#feature-links .feature-group a{padding:9px 5px;gap:7px;font-size:calc(12px + 1pt)}#feature-links .feature-overview{margin-bottom:0}.feature-group h3{margin-bottom:6px}}

/* 開始前は入力導線を先に、読込後は編集操作を表示。 */
#empty{padding:36px 20px 26px;max-width:760px;margin:0 auto}
#empty h1{margin:0 0 12px}#empty #feature-description{margin:0 0 22px}
#empty .privacy{margin:14px 0 0}
@media(max-width:620px){#empty{padding:28px 8px 20px}#empty h1{font-size:22px}#empty #feature-description{font-size:13px}}

#empty:has(h1[hidden]) #feature-description{font-size:20px;font-weight:600;line-height:1.7;color:#222b38;margin:0;letter-spacing:.02em}
@media(max-width:620px){#empty:has(h1[hidden]) #feature-description{font-size:18px;text-wrap:balance}}
.layout.no-sidebar{grid-template-columns:minmax(0,1fr)}#image-import-settings>.tools{flex-wrap:wrap}#image-import-settings{padding:0 0 12px}#image-import-settings>.hint{margin:4px 0}body.has-pages #empty{padding:16px 20px 4px}body.has-pages #empty #feature-description{margin-bottom:8px}
#editor[open]{display:flex;flex-direction:column;height:min(900px,94dvh);overflow:hidden}#editor .dialog-heading,#editor .dialog-footer{flex-shrink:0}#editor .edit-tools{flex-shrink:0;max-height:28dvh;overflow:auto}#editor .editor-help{flex-shrink:0;max-height:20dvh;overflow:auto;font-size:12px}#editor #stage-wrap{flex:1;min-height:40px;overflow:auto}#editor .dialog-footer{background:#fff;padding-top:10px}
#image-import-settings label{white-space:nowrap;flex-shrink:0}#image-import-settings select{width:auto}#image-margin{width:70px}

/* 全機能を使える共通編集画面。 */
#empty{max-width:none;margin:0;min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;border-radius:0;padding:40px 16px}#empty .hint{margin:16px 0 0}.pages-area:has(#empty:not([hidden])){min-height:65vh}aside h2{margin-bottom:16px}

#session-error{margin:12px 20px;padding:12px 16px;border-radius:8px;background:#fff4df;color:#934312;font-size:13px}

.page-card{-webkit-touch-callout:none}.page-card.touch-dragging{opacity:.65}
@media(max-width:760px){
 #pages{grid-template-columns:minmax(0,1fr)}
}

/* ページ領域の最大幅。 */
main{max-width:1600px;margin-inline:auto}
#pages{grid-template-columns:minmax(0,1fr)}

/* ページ全体の操作と、各ページの操作を分けて表示。 */
.workspace-bar{align-items:flex-start;flex-wrap:wrap}
.workspace-bar .tools{flex-wrap:wrap;min-width:0}
#sort-pages{width:auto;max-width:100%;font-size:13px}
#selection{padding-block:8px;white-space:nowrap}
.page-card{padding-top:49px}
.page-card .page-number{position:absolute;top:7px;left:9px;display:flex;align-items:center;height:34px;margin:0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.page-actions{position:absolute;top:7px;right:7px;display:flex;gap:0;cursor:default}
.page-actions button{position:relative;isolation:isolate;display:grid;place-items:center;width:26px;height:34px;padding:0;background:transparent;border:0;cursor:pointer}
.page-actions button::before{content:"";position:absolute;inset:5%;border-radius:inherit;pointer-events:none;z-index:-1}
.page-actions button:hover{background:transparent;color:#6550a0}
.page-actions button:hover::before{background:#d5dce7}.page-actions .page-remove:hover{color:#a62e2e}
.page-actions svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.page-actions .page-remove{color:#c44949}
@media(max-width:760px){
 .page-card{padding-top:59px}
 .page-actions button{width:32px;height:44px}
 .page-card .page-number{height:44px;min-width:44px;touch-action:none}
 .workspace-bar button,.workspace-bar select{min-height:44px}
 #sort-pages{width:140px}
}

/* 横並びの正方形カード。画像は縦横比を保って枠内に収める。 */
#pages{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.page-card{aspect-ratio:1;min-width:0;display:flex;flex-direction:column;overflow:visible}
.page-card .thumb{height:auto;min-height:0;flex:1;overflow:hidden}
.page-card .thumb canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.page-card .caption{flex:none;min-height:24px}
@media(min-width:761px){
 /* 画像の表示サイズを保ち、カード間隔を詰めて最大5列にする。 */
 main{padding-inline:12px}
 .pages-area{padding-inline:4px}
 #pages{grid-template-columns:repeat(auto-fill,minmax(max(212px,calc((100% - 32px)/5)),1fr));gap:8px;--drop-gap:8px}
 .page-card{aspect-ratio:auto}
 .page-card .thumb{height:220px;flex:none}
 .page-card .thumb canvas{max-height:220px}
}
@media(max-width:760px){#pages{grid-template-columns:minmax(0,1fr)}}
/* 装飾設定を上部のポップオーバーに集約し、ページ領域を全幅にする。 */
.layout{grid-template-columns:minmax(0,1fr)}
.document-decoration-tools{margin-left:auto;flex-wrap:wrap}
.document-decoration-tools button.applied{color:#6745b4;background:#eee9fa}
.decoration-panel{position:fixed;inset:auto;margin:0;width:290px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:14px;border:1px solid #dce2eb;border-radius:10px;color:#203047;background:#fff;box-shadow:0 8px 28px #20304724}
.decoration-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.decoration-heading button{padding:0;width:30px;height:30px;font-size:20px}
.decoration-panel fieldset{margin:8px 0 0;padding:0;border:0;min-width:0}
.decoration-panel legend{padding:0;width:100%}
.decoration-panel legend label{justify-content:flex-start}
.decoration-panel label{font-size:13px}
.decoration-panel .hint{margin:10px 0 0}
@media(max-width:760px){.document-decoration-tools{margin-left:0;width:100%;gap:4px}.decoration-panel input:not([type=checkbox]),.decoration-panel select{min-height:40px}}

/* カードごとの薄いグレー背景。 */
.page-card{background:#e8ebef}
.page-card.selected{background:#eeebfa}
/* 印刷ボタンはPCだけ。スマホの幅とタッチ端末では出さない(共有やOSの印刷を使う)。 */
@media(max-width:760px),(pointer:coarse){#print{display:none}}
#print-frame{position:fixed;left:-10000px;top:0;width:1000px;height:800px;border:0;pointer-events:none}

/* デザイン調整(2026-09-21)。ここより前の規則を上書きする。 */

/* 1. 開く前は操作を隠す。ファイルを読み込むまで並べ替え・装飾の操作は出さない。 */
body:not(.has-pages) .workspace-bar{display:none}
body:not(.has-pages) .toolbar #open,
body:not(.has-pages) .toolbar #clear,
body:not(.has-pages) .toolbar #count,
body:not(.has-pages) .toolbar #print,
body:not(.has-pages) .toolbar #save{display:none}
/* 空の画面には取り消し・やり直しも出さない(2026-09-21 ユーザー指示。クリアの直後に矢印だけが残っていた)。Ctrl+Z / Ctrl+Shift+Z は空の画面でも効くので、誤ってクリアしたときはそれで戻せる。 */
body:not(.has-pages) .toolbar #undo,
body:not(.has-pages) .toolbar #redo{display:none}
/* 中身が全部消えたときに帯の余白だけが残らないようにする。 */
body:not(.has-pages) .toolbar{padding:0}

/* 1b. 空の画面をドロップ領域だと分かる枠にする(見出しは増やせないので枠と余白で示す)。 */
body:not(.has-pages) .pages-area:has(#empty){min-height:0;padding:10px 20px 28px}
body:not(.has-pages) #empty{max-width:720px;margin:0 auto;min-height:clamp(240px,36vh,330px);padding:40px 24px;border:2px dashed #ced7e3;border-radius:12px;background:#fafbfd;transition:border-color .15s,background .15s}
body:not(.has-pages) #empty:hover{border-color:#b9c4d4;background:#f7f9fc}
body:not(.has-pages) #empty #start{padding:13px 26px;font-size:15px;border-radius:9px}
body:not(.has-pages) #empty .hint{margin:18px 0 0;font-size:13px}

/* 2. ツールバーのまとまり。間隔・枠・状態は 12b 節にまとめた。 */
/* 一括並べ替えだけ枠があって浮くので、隣の文字ボタンに合わせる。幅は閉じた状態の文言に合わせて詰める。 */
#sort-pages{width:128px;border-color:transparent;background:transparent;border-radius:7px;padding:7px 8px;font-size:14px}
#sort-pages:hover:not(:disabled){background:#e9edf3}
#sort-pages:disabled{opacity:.35;cursor:default}
/* 「◯ページ選択中」をボタン列と同じ高さに揃える。 */
.workspace-bar #selection{align-self:center;padding-block:0}
/* 取り消し・やり直し・回転はカードの操作と同じ線画アイコンにし、当たり判定は34px角。 */
#undo,#redo{display:inline-grid;place-items:center;min-width:34px;min-height:34px;padding:4px}
.toolbar button svg,.workspace-bar button svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#rotate{display:inline-flex;align-items:center;gap:5px}
/* 上段のボタンは高さを36pxに揃える(保存だけ大きく、取り消しだけ小さくしない)。 */
.toolbar button{display:inline-flex;align-items:center;justify-content:center;height:36px;min-height:36px;padding-block:0}
.toolbar .primary{padding-inline:18px}
.toolbar #undo,.toolbar #redo{width:36px;min-width:36px;padding:0}

/* 3. ページカード。白地+細い枠にして、ホバーと選択の差をはっきりさせる。 */
.page-card{background:#fff;border-color:#e2e8f0;border-radius:10px;box-shadow:0 1px 2px #2030470f;transition:border-color .12s,background .12s,box-shadow .12s}
.page-card:hover{border-color:#c3cee0;background:#f4f7fa;box-shadow:0 2px 6px #2030471a}
.page-card.selected{border-color:#8974dc;background:#f4f1fd;box-shadow:0 2px 8px #6a55c424}
.page-card.selected:hover{border-color:#7156cc;background:#ece7fa}
.page-card:focus-visible{outline:2px solid #8171d3;outline-offset:2px}
/* 主役はサムネイル。紙の影を少し強め、白地の上でも輪郭が分かるようにする。 */
/* .thumb は overflow:hidden なので、影が切れないぶんだけ内側に余白を作る。 */
.page-card .thumb{padding:6px}
@media(min-width:761px){.page-card .thumb{height:232px}}
.page-card .thumb canvas{box-shadow:0 0 0 1px #e3e8f0,0 4px 12px #24334b26}
.page-card .page-number{color:#4d5c73}
.page-card .name{color:#7d8ba0}
.page-card.selected .name{color:#6d6a90}
/* そのファイルの何ページ目か。ファイル名が省略されても、右端で必ず読める。 */
.page-card .name{flex:1 1 auto;min-width:0}
.page-card .caption,.page-card .caption input{cursor:pointer}
.page-card .source-page{flex:none;margin-left:auto;color:#5a6779;font-variant-numeric:tabular-nums;white-space:nowrap}

/* 4. 透かし・ページ番号のパネル。行間と入力欄の幅を揃える。 */
.decoration-panel .decoration-heading{margin-bottom:4px}
.decoration-panel fieldset{margin:6px 0 0}
.decoration-panel legend label{margin:2px 0 6px}
.decoration-panel fieldset>label{margin:11px 0;gap:12px}
.decoration-panel fieldset input:not([type=checkbox]):not([type=range]),
.decoration-panel fieldset select,
.decoration-panel fieldset input[type=range]{flex:none;width:142px;max-width:142px}
.decoration-panel .hint{margin:14px 0 0}

/* 5. 保存ダイアログ。項目ごとに間をあけ、ダウンロードの手前に余白を取る。 */
#export-dialog>label{margin:18px 0 0;font-size:13px}
#export-dialog>label:first-of-type{margin-top:2px}
#export-dialog #split-options label{margin:12px 0 0}
#export-dialog>.hint{margin:14px 0 0}
#group-hint.note{color:#203047}#group-hint.error{color:#b23a3a}
#export-dialog #download{margin-top:24px}

/* 6. 編集ダイアログ。ラベルを1行に収め、フォーカス枠を一重にする。 */
.edit-tools{gap:10px 12px}
.edit-tools label{white-space:nowrap}
.edit-tools #delete-overlay{margin-left:auto}
#layer-tools{display:flex;align-items:center;gap:2px;flex:none}
#layer-tools button{width:34px;height:34px;padding:0}
@media(max-width:760px){#layer-tools button{width:44px;height:44px}}
#editor .editor-help{margin-top:12px}
/* border と outline が二重に見え、外側の輪郭は .edit-tools のスクロール枠で上下が切れる。輪郭を枠の位置に重ねて1本にする。 */
#text-value:focus-visible{border-color:transparent;outline-offset:-1px}
#editor .edit-tools{padding:3px}
#stage-wrap{border-radius:10px}

/* 7. スマートフォン。段数を減らして、ページが早く見えるようにする。 */
@media(max-width:760px){
 /* 帯の上下余白を詰め、最初のページを早く見せる。 */
 .toolbar,.workspace-bar{padding:8px 0}
 .pages-area{padding:4px 0 14px}
 /* ページ操作の段は折り返す(2026-09-24: 以前の横スクロールの1列では、375px で「複製」が右端で切れ、「削除」は画面の外だった)。
    1段目は「すべて選択」と選択中の表示、2段目に「回転・複製・削除」をまとめて置く(選択中の表示の幅で残りを埋め、回転を必ず次の段へ送る。自然な折り返しだと幅によって複製と削除が分かれる)。 */
 .workspace-bar{flex-wrap:wrap;align-items:center;gap:6px 10px}
 .workspace-bar>.tools:not(.document-decoration-tools){flex:1 1 100%;min-width:0;flex-wrap:wrap}
 .workspace-bar>.tools>*{flex:none}
 .workspace-bar #selection{flex:1 0 calc(100% - 140px)}
 /* 装飾の操作(用紙・並べ替え・ページ番号・透かし)も切らずに折り返す。375px で4つが1段に収まるよう、間隔と余白は最後の[E]節で詰める。 */
 .workspace-bar .document-decoration-tools{flex:1 1 100%;width:auto;min-width:0;margin-left:0;flex-wrap:wrap}
 /* 3つの操作が「◯ページ選択中」と並んでも切れないよう、左右の余白を詰める。 */
 .workspace-bar .document-decoration-tools button{padding-inline:7px}
 .workspace-bar #selection{font-size:11px}
 /* 2段目に回る「◯ページ・保存」は右に寄せる。 */
 .toolbar>.tools:last-child{margin-left:auto}
 /* タッチの当たり判定は44pxを保つ。 */
 .toolbar button{height:44px;min-height:44px}
 .toolbar #undo,.toolbar #redo{width:44px;min-width:44px}
 body:not(.has-pages) #empty{min-height:clamp(220px,36vh,320px);padding:32px 16px}
}

.watermark-size-controls{display:flex;align-items:center;gap:8px;width:142px;flex:none}
.decoration-panel .watermark-size-controls #watermark-size-slider{width:78px;min-width:0;max-width:none}
.decoration-panel .watermark-size-controls #watermark-size{width:56px;max-width:none;padding-inline:5px}

/* 8. 上下の帯のすべてのボタンに線画アイコンを付ける。図案は同じ意味の操作でページカードと揃える。 */
.toolbar button,.workspace-bar button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.toolbar button svg,.workspace-bar button svg{width:16px;height:16px}
/* アイコンのぶんだけ横に伸びるので、左右の余白とグループの間隔を詰めて1段に保つ。 */
.toolbar button,.workspace-bar button{padding-inline:9px}
.toolbar .primary{padding-inline:16px}
.toolbar #undo,.toolbar #redo{padding:0}
/* 一括並べ替えは select なので中に図案を置けない。背景に描いて文字をずらす(無効時は要素ごと薄くなる)。 */
#sort-pages{--sort-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23203047' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h13M4 12h9M4 18h5'/%3E%3C/svg%3E");width:150px;padding-left:29px;background-image:var(--sort-icon);background-repeat:no-repeat;background-position:8px center;background-size:16px 16px}
#sort-pages:hover:not(:disabled){background-color:#e9edf3;background-image:var(--sort-icon);background-repeat:no-repeat;background-position:8px center;background-size:16px 16px}
/* select だけ2px高く、左右の群が1pxずれるので、ボタンと同じ36pxにして帯の中央で揃える。 */
#sort-pages{height:36px;padding-block:0}
.workspace-bar{align-items:center}
@media(max-width:760px){
 /* アイコンで幅が増えるので、上段は折り返しを許して横にあふれさせない。 */
 .toolbar .tools{flex-wrap:wrap}
 .toolbar button,.workspace-bar button{gap:4px}
 .toolbar button{padding-inline:6px}
 .toolbar .primary{padding-inline:14px}
 #sort-pages{width:152px}
 /* 「前へ/後ろへ」は「上へ/下へ」に変わるので、矢印も上下に向ける。 */
 .workspace-bar #move-left svg,.workspace-bar #move-right svg{transform:rotate(90deg)}
}

/* 9. 並びの整理。上段=書類の出し入れ、下段の左=選択と選んだページへの操作、下段の右=書類全体の設定。 */
body:not(.has-pages) .toolbar #insert-blank{display:none}
/* 「◯ページ選択中」は「すべて選択」の隣。出たり消えたりしても右の操作が動かないよう幅を確保する。 */
.workspace-bar #selection{min-width:100px;padding-left:4px}
@media(max-width:760px){
 /* 上段は2つの群をほどいて1つの流れにし、2段に収める(保存は右端)。 */
 .toolbar .tools{display:contents}
 .toolbar #count{margin-left:auto}
 .workspace-bar #selection{min-width:90px;padding-left:2px}
}

/* 10. 用紙(画像ページの用紙設定)。ページ番号・透かしと同じ浮かぶパネルにし、以前の開閉式の行(と専用の書式)を打ち消す。 */
.decoration-panel #image-import-settings{margin:6px 0 0;padding:0;font-size:13px;color:inherit}
.decoration-panel #image-import-settings>label{margin:11px 0;gap:12px;font-size:13px;white-space:nowrap}
.decoration-panel #image-import-settings select,
.decoration-panel #image-import-settings input{flex:none;width:142px;max-width:142px}
.decoration-panel #image-import-settings>.hint{margin:14px 0 0}
/* 文言を「並べ替え」に縮めたので、閉じた状態の幅もそれに合わせる。 */
.document-decoration-tools #sort-pages{width:122px}
@media(max-width:760px){
 /* 右の群が4つになるので、間隔を詰めて1列に収める。 */
 .workspace-bar .document-decoration-tools button{padding-inline:6px}
 .document-decoration-tools #sort-pages{width:118px}
}

/* 11. 編集画面の表示倍率。下端の行の左に置く(見た目の順とキーボードの順が「ページ→倍率→適用」で一致する。見出しの行だとスマホで2段に割れて順番が食い違う)。 */
#editor .dialog-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;text-align:left}
#editor .dialog-footer #editor-done{margin-left:auto}
.zoom-tools{display:flex;align-items:center;gap:2px;min-width:0}
.zoom-tools button{display:inline-flex;align-items:center;justify-content:center;height:32px;min-width:32px;padding:0 9px;font-size:13px}
.zoom-tools #zoom-out,.zoom-tools #zoom-in{padding:0}
.zoom-tools #zoom-reset{min-width:52px;font-variant-numeric:tabular-nums;color:#4d5c73}
.zoom-tools #zoom-width{margin-left:8px}
.zoom-tools svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
/* 拡大してスクロールバーが出ても表示枠の幅が変わらないようにする(「幅に合わせる」がずれない)。両側に取ってページを中央に保ち、細く・地の色に馴染ませて白い帯に見えないようにする。 */
#stage-wrap{scrollbar-gutter:stable both-edges;scrollbar-width:thin;scrollbar-color:#b4bfcd transparent}
@media(max-width:760px){
 .zoom-tools button{height:44px;min-width:44px;padding-inline:7px}
 .zoom-tools #zoom-width{margin-left:2px}
}

/* 12. 編集画面の余白を詰める。表示枠の高さの上限(62vh)が残っていて、ダイアログの下に白い帯が余っていた。表示枠を残りの高さいっぱいに使う。 */
#editor{padding:16px 20px}
#editor #stage-wrap{max-height:none;padding:12px}
#editor .dialog-heading{margin-bottom:6px}
#editor .editor-help{margin-top:6px}
#editor .editor-help summary{margin-bottom:4px}
#editor .dialog-footer{margin-top:10px;padding-top:0}
/* 編集画面・開くボタン・ダウンロードにも、ツールバーと同じ線画アイコンを付ける。 */
#editor .edit-tools button,#editor .dialog-footer button,#start,#download{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#editor .edit-tools button svg,#editor .dialog-footer button svg,#start svg,#download svg{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#start svg{width:18px;height:18px}
.zoom-tools button{gap:5px}
@media(max-width:760px){
 #editor{padding:14px 14px}
 #editor #stage-wrap{padding:6px}
 /* アイコンで幅が増えるので、下端の行が3段にならないよう文言の余白を詰める。 */
 .zoom-tools button{padding-inline:5px;gap:4px}
}

.watermark-opacity-controls{display:flex;align-items:center;gap:6px;width:142px;flex:none}
.decoration-panel .watermark-opacity-controls #watermark-opacity{width:64px;min-width:0;max-width:none}
.decoration-panel .watermark-opacity-controls #watermark-opacity-number{width:50px;max-width:none;padding-inline:5px}

/* サイズ・濃さのスライダーと数値欄の列を統一する。 */
.watermark-size-controls,.watermark-opacity-controls{display:grid;grid-template-columns:minmax(0,1fr) 56px 12px;align-items:center;gap:6px;width:164px;flex:none}
.decoration-panel .watermark-size-controls #watermark-size-slider,.decoration-panel .watermark-opacity-controls #watermark-opacity{width:100%;min-width:0;max-width:none;margin:0}
.decoration-panel .watermark-size-controls #watermark-size,.decoration-panel .watermark-opacity-controls #watermark-opacity-number{width:56px;max-width:none;height:36px;padding:6px;text-align:right;font-variant-numeric:tabular-nums}
.watermark-opacity-controls>span{font-size:12px;text-align:center}

.page-card.selected .page-actions button:hover::before{background:#d7ccef}

/* 12b. 上部2段(.toolbar / .workspace-bar)の操作の見た目。ここ1か所で決める(以前の「背景なし」「全部に同じ枠」と、各節に散っていた個別の間隔を置き換えた)。
   - 部品: 白地+1pxの枠 #d5dde8、角丸8px、高さ36px(スマホ幅は44px)、文字13px。下の表示切り替え(18節の .view-group)も同じ体系にしてある
   - 階層: 保存だけ塗り(.primary)。削除は危険色の文字。ほかは同格の二次ボタン
   - 間隔: まとまりの中は6px(gap)、まとまりの間は16px(gap 6px + margin 10px)の2段階。状態の文字(◯ページ・◯ページ選択中)とボタンの間は10px
   - 無効: 要素ごと薄くすると枠が欠けた部品に見えるので、枠は残して地を灰色にし、文字とアイコンだけ薄くする
   セレクタに「.tools>」「.extract-menu>」を付けるのは、「取り出す」のメニューの中の項目に枠を付けないため。
   id を含む既存の規則(#sort-pages の枠なし・透明、.soft / .primary の地)より後ろ・同等以上の詳細度で書いて上書きしている。 */
.toolbar .tools>button,.toolbar .extract-menu>button,.workspace-bar .tools>button,#sort-pages{border:1px solid #d5dde8;border-radius:8px;background-color:#fff;color:#203047;font-size:13px;transition:background-color .12s,border-color .12s}
.workspace-bar .tools>button{height:36px;padding-block:0}
.toolbar .tools>button:hover:not(:disabled),.toolbar .extract-menu>button:hover:not(:disabled),.workspace-bar .tools>button:hover:not(:disabled),#sort-pages:hover:not(:disabled){background-color:#f1f4f8;border-color:#bfc9d6}
/* 主操作(保存)は塗り。 */
.toolbar .tools>button.primary{background-color:#253247;border-color:#253247;color:#fff;font-weight:600}
.toolbar .tools>button.primary:hover:not(:disabled){background-color:#3c4b62;border-color:#3c4b62}
/* 削除は危険色の文字。ホバーも赤系にして、押す前に分かるようにする。 */
.workspace-bar .tools>button.danger{color:#c44949}
.workspace-bar .tools>button.danger:hover:not(:disabled){background-color:#fdf2f2;border-color:#ebc4c4}
/* 適用中の装飾(用紙・ページ番号・透かし)。枠も同系色にして、地だけ色が変わって見えないようにする。 */
.workspace-bar .tools>button.applied{background-color:#f3effc;border-color:#cbbdf0;color:#6745b4}
.workspace-bar .tools>button.applied:hover:not(:disabled){background-color:#ebe4fa;border-color:#b6a4ea}
/* 無効。並べ替えの図案は背景画像で文字色に追従しないので、薄い色の図案に差し替える。 */
.toolbar .tools>button:disabled,.toolbar .extract-menu>button:disabled,.workspace-bar .tools>button:disabled,#sort-pages:disabled{opacity:1;background-color:#f6f8fa;border-color:#d5dde8;color:#a9b3c1}
#sort-pages:disabled{--sort-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b3c1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h13M4 12h9M4 18h5'/%3E%3C/svg%3E")}
/* 最初の画面の取り出しボタンにも同じ枠(文字色と大きさは 16 節のまま)。 */
.extract-start-actions button{border-color:#d5dde8;border-radius:8px}
.extract-start-actions button:hover:not(:disabled){border-color:#bfc9d6}
/* 間隔。上段: [追加・白紙・取り出す] [取り消し|やり直し] [すべてクリア] … [◯ページ 印刷 保存]。
   下段: [すべて選択 ◯ページ選択中] [回転 複製] [前へ 後ろへ] [削除] … [用紙 並べ替え ページ番号 透かし]。 */
.toolbar .tools,.workspace-bar .tools{gap:6px}
.toolbar #undo,.toolbar #clear,.workspace-bar #rotate,.workspace-bar #move-left,.workspace-bar #remove{margin-left:10px}
.toolbar #count{margin-right:4px}
@media(min-width:761px){
 /* 取り消し・やり直しは対の操作なので、1つの分段ボタンにする。やり直しの左の枠が仕切りになる(枠は重ねず1本)。 */
 .toolbar #undo{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
 .toolbar #redo{margin-left:-6px;border-top-left-radius:0;border-bottom-left-radius:0}
}
@media(max-width:760px){
 /* 上段は群をほどいて折り返すので、行頭が字下げに見えないよう群の間は狭くする。取り消し・やり直しは折り返しで分かれうるので分段にしない。 */
 .toolbar{gap:6px}
 .toolbar #undo,.toolbar #clear{margin-left:4px}
 .workspace-bar .tools>button{height:44px}
}

/* カードの寸法を保ち、ページの表示だけを5%拡大する。 */
.page-card .thumb{overflow:visible}
.page-card .thumb canvas{transform:scale(1.05);transform-origin:center}

/* 13. 図形(白塗り・囲み・矢印・蛍光ペン)と大きさ変更のハンドル */
/* 追加の操作は「追加」の見出しの下に名詞で並べ、1つの群として折り返す。 */
.add-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.add-caption{font-size:12px;color:#74839a;margin-right:4px}
#editor .add-tools>button{border:0;background:#fff;padding:6px 10px}
#editor .add-tools>button:hover{background:#e9edf3}
#whiteout-note{flex-shrink:0;margin:6px 0 0;line-height:1.6}
.shape-overlay svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
/* 白塗りは追加した順に関係なく一番下(保存したPDFでも同じ順で描く)。白い紙の上でも位置が分かるよう、選んでいない間は薄い破線を出す(保存されない)。 */
.overlay{z-index:1}
.overlay.whiteout-overlay{z-index:0}
.overlay.whiteout-overlay:not(.selected){outline:1px dashed #9aa7b8}
.resize-handle{display:none;position:absolute;right:-7px;bottom:-7px;width:13px;height:13px;border:2px solid #fff;border-radius:3px;background:#8164d4;box-shadow:0 0 0 1px #5d45aa;cursor:nwse-resize;touch-action:none}
.overlay.selected .resize-handle{display:block}
.text-overlay .resize-handle{top:calc(50% - 7px);bottom:auto;cursor:ew-resize}
.arrow-overlay .resize-handle{top:calc(50% - 7px);bottom:auto;border-radius:50%;cursor:crosshair}
@media(pointer:coarse){.resize-handle{right:-12px;bottom:-12px;width:22px;height:22px}.text-overlay .resize-handle,.arrow-overlay .resize-handle{top:calc(50% - 11px)}}
@media(max-width:760px){.add-tools{gap:3px}#editor .add-tools>button{padding:6px 7px;gap:4px;font-size:13px}.add-caption{flex-basis:100%;margin:0}}

/* 14. 印影・サインの画面 */
#stamp-dialog{width:min(420px,94vw);padding:16px 20px}
.stamp-tabs{display:flex;gap:4px;padding:3px;border-radius:9px;background:#eef1f5;margin-bottom:12px}
.stamp-tabs button{flex:1;padding:7px 10px;border-radius:7px}
.stamp-tabs button[aria-selected=true]{background:#fff;box-shadow:0 1px 3px #24334b26;font-weight:600}
.stamp-fields{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.stamp-fields label{margin:0;white-space:nowrap}
.stamp-fields #stamp-text{width:150px}
.stamp-fields select{width:auto}
.stamp-preview-box{display:grid;place-items:center;height:150px;margin-top:12px;border-radius:10px;background:#eef1f5}
.stamp-preview-box img{width:120px;height:120px}
.stamp-preview-box img:not([hidden])+.hint{display:none}
#sign-pad{display:block;width:100%;height:170px;margin-bottom:10px;border:1px dashed #b4bfcd;border-radius:10px;background:#fff;touch-action:none;cursor:crosshair}
#sign-clear,#stamp-place{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#sign-clear{margin-left:auto;border-color:#dce2eb}
#sign-clear svg,#stamp-place svg{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stamp-note{margin:12px 0 0;line-height:1.6}
.stamp-error{margin:10px 0 0;color:#a43636;background:#fff0f0;border-radius:6px;padding:10px;font-size:12px}
#stamp-dialog .dialog-footer{margin-top:12px;justify-content:flex-end}
/* 書き終えてすぐ押しても、ダブルタップの判定待ちで押し損ねないようにする。 */
#stamp-dialog button{touch-action:manipulation}

/* 15. 入力欄(フォーム)への記入。PDFの入力欄の位置に、画面の入力欄を重ねる。追加した文字・図形・印影はその上に置ける。 */
#form-fields{position:absolute;inset:0}
#overlays{pointer-events:none}
.overlay{pointer-events:auto}
.form-field{position:absolute;margin:0;padding:0 2px;border:1px solid #7f9bd6;border-radius:2px;background:#dbe8ffb3;color:#111827;font-family:Noto,Arial,sans-serif;line-height:1.2;min-width:0;box-sizing:border-box}
textarea.form-field{resize:none;padding:2px;overflow:auto}
select.form-field{padding:0}
input.form-checkbox,input.form-radio{padding:0;accent-color:#253247;cursor:pointer}
/* 入力していない間は、下に描いた保存結果そのものを見せる(欄の文字と印は透明にして、枠と薄い色だけ残す)。 */
.form-field:not(:focus){color:transparent;background:#dbe8ff59}
select.form-field:not(:focus){appearance:none}
input.form-checkbox,input.form-radio{appearance:none;background:#dbe8ff59}
input.form-radio{border-radius:50%}
.form-field:focus-visible{outline:2px solid #5d45aa;outline-offset:1px}
input[type=text].form-field:focus,input[type=password].form-field:focus,textarea.form-field:focus,select.form-field:focus{background:#fff}
.form-field:disabled{background:#e5e7ebb3;border-color:#c3c9d4}
#form-note{flex-shrink:0;margin:6px 0 0;line-height:1.6}

/* 16. 文字の抜き出し */
#extract-text{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}
#extract-text svg{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#text-dialog{width:min(640px,94vw);padding:16px 20px}
.text-meta{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px}
#text-output{display:block;width:100%;min-height:200px;max-height:52dvh;padding:10px;border:1px solid #d5dde8;border-radius:8px;background:#fff;font:13px/1.7 Roboto,"Noto Sans JP",system-ui,sans-serif;color:inherit;resize:vertical}
.text-empty{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:#fff7e6;color:#7a5200;font-size:13px;line-height:1.7}
#text-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
#text-copied{margin-right:auto}
#text-save,#text-copy{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#text-save{border-color:#dce2eb}
#text-save svg,#text-copy svg{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.text-note{margin:12px 0 0;line-height:1.6}

/* 16b. 軽くする(圧縮)と、文章を Word に取り出す。どちらも保存の画面の中(文字の抜き出しと同じ作り)。 */
.compress-result{margin:10px 0 0;padding:10px 12px;border-radius:8px;background:#eef6ff;color:#1d4f91;font-size:13px;line-height:1.7}
#extract-word{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:8px}
#extract-word svg,#word-create svg{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#extract-text,#extract-word{margin-top:0}
.extract-menu{position:relative}
body:not(.has-pages) .extract-menu{display:none}
#extract-menu-panel{position:absolute;z-index:20;top:calc(100% + 5px);right:0;width:260px;max-width:calc(100vw - 24px);padding:6px;background:#fff;border:1px solid #dce2eb;border-radius:9px;box-shadow:0 8px 24px #20304724}
#extract-menu-panel button{display:flex;width:100%;justify-content:flex-start;padding:8px 10px}
@media(max-width:620px){.extract-menu-label{display:none}}
#extract-scope-dialog{width:min(360px,94vw);padding:16px 20px}
#extract-scope-dialog>label{display:block;margin:12px 0;font-size:13px}
#extract-scope-dialog>label>select,#extract-scope-dialog>label>input{display:block;margin-top:6px;width:100%}
.extract-start-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:12px}
.extract-start-actions button{color:#4f6076;font-size:13px;padding:5px 8px}
#word-dialog{width:min(560px,94vw);padding:16px 20px}
.word-lead{margin:0 0 8px;line-height:1.7}
.word-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-top:12px}
#word-create{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-left:auto}

/* 17. プログラムを読み込めなかったとき。起動が終わるまで「開く」は押せない見た目にし、8秒たっても起動しなければ案内を出す(CSS だけで動くので、プログラムが1行も動かなくても出る)。 */
/* 起動が終わるまで「開く」の枠は出さない(保存してある作業が復元される場合に、枠が一瞬見えてからページの一覧に入れ替わるのを防ぐ。場所は確保したままなので、出たときに他が動かない)。8秒たっても起動しなければ、案内と一緒に出す。 */
body:not([data-session-ready]) #empty{visibility:hidden;animation:reveal-empty 0s 8s forwards}
@keyframes reveal-empty{to{visibility:visible}}
body:not([data-session-ready]) #start,body[data-session-ready="locked"] #start{pointer-events:none;opacity:.45}
#load-failed{visibility:hidden;max-height:0;margin:0;overflow:hidden;color:#a43636;font-size:13px;animation:load-failed 0s 8s forwards}
@keyframes load-failed{to{visibility:visible;max-height:6em;margin-top:14px}}
body[data-session-ready] #load-failed{display:none}

/* 18. 一覧の見せ方: 単位(ページ / ファイル)とサムネイルの大きさの切り替え、ファイル単位のカード、スマホ幅の行表示 */
.view-bar{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin:0 0 10px}
body:not(.has-pages) .view-bar{display:none}
/* 上部2段(12b節)と同じ体系: 白地+1pxの枠 #d5dde8、外形の高さ36px・角丸8px、文字13px。選択中は薄い灰の地と太字(塗りの濃色は保存だけに使う)。 */
.view-group{display:flex;gap:2px;padding:2px;border:1px solid #d5dde8;border-radius:8px;background:#fff}
.view-group button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:6px;font-size:13px;color:#5b6a80}
.view-group button svg{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.view-group button:hover{background:#f1f4f8}
.view-group button[aria-pressed=true]{background:#e9edf3;color:#203047;font-weight:600}
.file-count{flex:none;margin-left:auto;padding:1px 7px;border-radius:999px;background:#eef1f5;color:#5b6a80;font-size:11px;white-space:nowrap}
.page-card.selected .file-count{background:#e2dcf6}
/* 複数ページのまとまりは、紙が重なって見えるようにする。 */
.page-card.file-stack .thumb canvas{box-shadow:0 0 0 1px #e3e8f0,4px 4px 0 -1px #fff,4px 4px 0 0 #cfd7e3,8px 8px 0 -1px #fff,8px 8px 0 0 #cfd7e3,0 6px 14px #24334b26}
@media(min-width:761px){
 #pages[data-size] .page-card .thumb canvas{max-height:100%}
 #pages[data-size="s"]{grid-template-columns:repeat(auto-fill,minmax(164px,1fr))}
 #pages[data-size="s"] .page-card .thumb{height:168px}
 #pages[data-size="l"]{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
 #pages[data-size="l"] .page-card .thumb{height:430px}
}
/* スマホ幅は1ページ1行(番号・小さいサムネイル・ファイル名・操作)。カードのままだと1ページで画面の4割を使い、並べ替えの移動先が画面の外に出ていた。 */
@media(max-width:760px){
 .size-group{display:none}
 .view-bar{margin-bottom:8px}
 /* 上部2段と同じく外形44px(タッチの当たり判定)。 */
 .view-group button{height:38px}
 .pages-area{padding-inline:0}
 #pages{gap:6px;--drop-gap:6px}
 .page-card{display:grid;grid-template-columns:44px 52px minmax(0,1fr) auto;align-items:center;column-gap:6px;padding:5px 4px 5px 0;aspect-ratio:auto;min-height:0}
 .page-card .page-number{position:static;height:64px;min-width:44px;justify-content:center;font-size:12px}
 .page-card .thumb{flex:none;width:52px;height:64px;padding:2px;overflow:visible}
 .page-card .thumb canvas{max-width:48px;max-height:60px;transform:none}
 .page-card.file-stack .thumb canvas{box-shadow:0 0 0 1px #e3e8f0,3px 3px 0 -1px #fff,3px 3px 0 0 #cfd7e3}
 /* 名前の欄は格子で置く: 1段目がチェックとファイル名、2段目がページ数(ファイル単位)と page N。名前の欄が狭い幅(375pxで約77px)でも、
    チェックだけが1段を占めて3段に折り返したり、ページ数が名前と同じ段に入って名前が1文字幅に潰れたりしないようにする(折り返し任せの flex ではどちらかが起きた)。 */
 .page-card .caption{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:6px;row-gap:3px;min-width:0;margin:0}
 .page-card .caption input{grid-column:1;grid-row:1;margin:2px 0 0}
 /* ファイル名は2行まで折り返す(375pxでは1行だと3文字ほどしか見えず、「見積書.pdf」も省略されていた)。3行目からは「…」。チェックは名前の1行目の高さに合わせる。 */
 .page-card .caption .name{grid-column:2;grid-row:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow-wrap:anywhere}
 .page-card .file-count,.page-card .source-page{grid-column:2;justify-self:start;margin-left:0}
 /* 1ページだけのまとまりは「1ページ」と page N が並び、狭い欄からはみ出して操作ボタンに掛かる。page N があれば1ページなのは分かるので、ページ数の方を出さない。 */
 /* 複数ページのまとまり(.file-stack)は page N を隠してあるだけで要素はあるので、対象から外す(外さないと、肝心のページ数が消える)。 */
 .page-card:not(.file-stack) .file-count:has(+ .source-page){display:none}
 .page-actions{position:static}
 .page-actions button{width:38px;height:44px}
}
/* 複数ページのまとまりでは、「元の何ページ目か」の表示は先頭のページのものでしかないので出さない(ページ数の表示が代わり)。 */
.page-card.file-stack .source-page{display:none}

/* サムネイルと共通の選択枠・四隅・辺・回転ボタン。 */
.overlay-image-frame{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.transform-handle{display:none;position:absolute;z-index:3;touch-action:none;user-select:none}
.overlay.selected .transform-handle{display:block}
.overlay.selected{outline:1px solid #8660df}
.object-resize{width:11px;height:11px;border:1px solid #8660df;border-radius:50%;background:white;transform:translate(-50%,-50%)}
.handle-nw{left:0;top:0;cursor:nwse-resize}.handle-ne{left:100%;top:0;cursor:nesw-resize}.handle-se{left:100%;top:100%;cursor:nwse-resize}.handle-sw{left:0;top:100%;cursor:nesw-resize}
.handle-w,.handle-e{top:50%;width:6px;height:16px;border-radius:4px;cursor:ew-resize}.handle-w{left:0}.handle-e{left:100%}
.handle-n,.handle-s{left:50%;width:16px;height:6px;border-radius:4px;cursor:ns-resize}.handle-n{top:0}.handle-s{top:100%}
.rotation-handle{width:30px;height:30px;padding:5px;border:1px solid #d9dfe7;border-radius:50%;background:#fff;color:#465469;box-shadow:0 2px 7px #172b4d18;cursor:grab;line-height:1}
.rotation-handle svg{display:block;width:18px;height:18px;pointer-events:none}.rotation-handle:active{cursor:grabbing}.rotation-handle:hover{background:#f1edfb;border-color:#b6a2df;color:#7150ac}
.rotation-angle{position:absolute;left:calc(100% + 7px);top:50%;transform:translateY(-50%);font:12px Arial,sans-serif;white-space:nowrap;background:white;color:#465469;padding:4px;border-radius:4px}
@media(pointer:coarse){.object-resize::after{content:'';position:absolute;inset:-9px}}

/* 追加操作を独立した行にし、選択中のプロパティは次の行へ置く。 */
#editor .edit-tools>.add-tools{flex-basis:100%;width:100%}
/* 描画前のcanvas既定サイズが白い横長の板として見えるのを防ぐ。 */
.page-card .thumb canvas:not([data-preview-ready="true"]){visibility:hidden}

/* オブジェクトの右クリックメニュー */
#object-order-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  z-index: 100;
  width: 296px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  padding: 7px;
  background: #fff;
  color: #222b38;
  border: 1px solid #e5e8ed;
  border-radius: 12px;
  box-shadow: 0 10px 36px #18273c26, 0 2px 8px #18273c12;
}

#object-order-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  line-height: 24px;
  text-align: left;
  white-space: nowrap;
}

#object-order-menu button:not(:disabled):hover,
#object-order-menu button:focus-visible { background: #f0f2f6; outline: none; }
#object-order-menu button:disabled { opacity: .35; }

#object-order-menu svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#object-order-menu kbd {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 5px;
  background: #f2f3f5;
  color: #5d636d;
  font: 11px/24px system-ui, "Yu Gothic", sans-serif;
}

#object-order-menu button[hidden] { display: none; }

#editor .edit-tools #whiteout-note{margin:0;font-size:11px;line-height:1.6;flex:0 1 auto}
@media(min-width:1100px){#editor .edit-tools #whiteout-note span{white-space:nowrap}}

#editor .edit-tools>#layer-tools{margin-left:0}

/* ページ編集のボタンは枠線を付けず、ホバーとフォーカスで操作状態を示す。 */
#editor button{border:0}

#editor .edit-tools #whiteout-note{margin-left:auto}
#editor .edit-tools #whiteout-note:not([hidden])+#delete-overlay{margin-left:0}

/* プロパティ内だけのスクロールで注意書きや削除操作を隠さない。 */
#editor .edit-tools{max-height:none;overflow:visible}
@media(max-width:760px){
 #editor .edit-tools{gap:6px 8px}
 #editor .edit-tools #whiteout-note{flex-basis:calc(100% - 80px);margin-left:0}
 #editor .edit-tools #whiteout-note span{white-space:normal}
}


/* 短い縦画面ではダイアログ全体をスクロールし、適用操作まで到達できるようにする。 */
@media(max-width:760px) and (max-height:700px){
 #editor[open]{overflow-y:auto}
 #editor #stage-wrap{flex:0 0 180px;min-height:180px}
}

@media(max-width:760px){
 #editor .zoom-tools{flex-wrap:wrap;max-width:100%}
 #editor .zoom-tools button{flex-shrink:0}
}

/* 保存の画面で、チェックを入れると開く設定(分割・パスワード・制限)。パスワードを掛けるページ(task-page.css の .sub-options)と同じ見せ方にする
   (2026-09-24 ユーザー指示「デザインをもっとわかりやすく」): 親のチェックの下の中身をまとめて段下げし、左に線を引いてどのチェックに属するかを示す。
   チェックはすべて 16px にそろえ、子の文字の頭を親の文字の頭にそろえる(チェック 16px + すき間 8px = 24px。線は親のチェックの真下)。 */
#export-dialog input[type=checkbox]{width:16px;height:16px;margin:0}
#export-dialog :is(#split-label,#password-label){display:flex;align-items:center;gap:8px;margin-top:20px;font-size:13px}
#export-dialog :is(#split-options,#password-options,#password-restrict-options){margin:8px 0 0 7px;padding:2px 0 4px 14px;border-left:3px solid #d5dde8}
#export-dialog :is(#password-options,#password-restrict-options)>label{display:block;margin:12px 0 0;font-size:13px}
#export-dialog :is(#password-options,#password-restrict-options)>label:first-child{margin-top:4px}
#export-dialog :is(#password-options,#password-restrict-options)>label>:is(input:not([type=checkbox]),.password-field){display:block;margin-top:6px}
#export-dialog #password-options>.hint{margin:12px 0 0}
/* 制限する(親のチェック)は上の欄と間を空ける。禁止の3項目は親と同じ大きさの文字にする */
#export-dialog #password-options #password-restrict-label{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:13px}
#export-dialog #password-options :is(#restrict-print-label,#restrict-copy-label,#restrict-modify-label){display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:13px}
#export-dialog #password-options #restrict-print-label{margin-top:4px}
/* 確認用の欄のすぐ下に出す「一致しません」(パスワードを掛けるページの .field-error と同じ扱い) */
#export-dialog .field-error{margin:6px 0 0;font-size:12px;line-height:1.5;color:#b23a3a}

/* 読み込み時のパスワード入力。枠と余白は他の画面（#stamp-dialog など）に合わせる。 */
#password-dialog{width:min(420px,94vw);padding:16px 20px}
#password-dialog .password-file{margin:0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
#password-dialog #password-lead{margin:8px 0 0;font-size:13px}
#password-dialog>label{display:block;margin:14px 0 0;font-size:13px}
#password-dialog>label>:is(input:not([type=checkbox]),.password-field){display:block;margin-top:6px}
#password-dialog #password-error{margin:12px 0 0}
#password-dialog>.hint{margin:12px 0 0}
#password-dialog .dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;text-align:left}
#password-dialog button{touch-action:manipulation}
/* ページ一覧(カードを置く場所)に灰色の地を敷き、白いカードを浮かせて見せる(2026-09-24 ユーザー指示)。色は作業ページの --soft と同じ。 */
#pages{padding:16px;border-radius:12px;background:#f1f3f6}
@media(max-width:760px){#pages{padding:6px 4px;border-radius:10px}} /* スマホ幅の行表示は横幅が足りないので、左右は4pxだけ */
/* 編集画面を別のタブから引き継ぐボタン(app.js の takeoverMessage)。案内の帯の右に置き、狭い幅では下へ折り返す。 */
#session-error:has(.session-takeover){display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px}
#session-error .session-takeover{flex:none;min-height:36px;padding:0 14px;border:1px solid #e2b98f;border-radius:8px;background:#fff;color:#7a3a10;font-weight:600;cursor:pointer}
#session-error .session-takeover:hover{background:#fff9f1;border-color:#d49a62}
/* 別のタブで編集中(locked)・別のタブへ引き継いだ後(moved)は、案内の帯とボタンだけを見せる。下の画面は操作できないので出さない。 */
body:is([data-session-ready="locked"],[data-session-ready="moved"]) main{display:none}
/* ページが無いときは、ページ一覧の灰色の地を出さない(空の画面で細い帯だけが残らないように)。 */
#pages:empty{padding:0;background:none}
/* ==[B] 切れ目で分割== */
/* 一覧の上の「切れ目を入れる」(app.js の startCutting)。並べる単位・大きさの切り替え(.view-group)と同じ外形(白地・1pxの枠 #d5dde8・角丸8px・13px、入れている間は薄い灰の地と太字)。
   切り替えの行の左端に置く(右の切り替えは動かさない。行を増やさない)。入れた数は赤い札で出す。 */
.cut-switch{position:relative;display:inline-flex;align-items:center;gap:5px;height:36px;margin-right:auto;padding:0 10px;border:1px solid #d5dde8;border-radius:8px;background:#fff;color:#5b6a80;font-size:13px;cursor:pointer;user-select:none;white-space:nowrap}
.cut-switch:hover{background:#f1f4f8}
.cut-switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cut-switch:has(input:focus-visible){outline:2px solid #8171d3;outline-offset:2px}
.cut-switch svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.cut-switch:has(input:checked){background:#e9edf3;color:#203047;font-weight:600}
.cut-count{flex:none;padding:1px 7px;border-radius:999px;background:#fbeceb;color:#b5423d;font-size:11px;font-weight:600}
/* 保存の画面の「分割方法」: 選択肢の欄が幅いっぱいに伸び、見出しが「分割方 / 法」と2行に折れていた(1ページずつ でも同じ)。見出しは折らず、選択肢の欄の方を縮める。 */
#export-dialog #split-options label:has(#split-mode){white-space:nowrap}
/* スマホ幅もラベルと切れ目の数を表示する。幅が足りないときは、単位の切り替えを次の行へ折り返す。 */
.view-bar:has(.cut-switch){flex-wrap:wrap;row-gap:8px}
@media(max-width:760px){.cut-switch{height:44px}.view-bar:has(.cut-switch){column-gap:8px}}
/* 切れ目: カードの中の要素だが、置き場所はカードの外のすき間(PCは右、スマホ幅の行は下)。サムネイルや操作ボタンには重ねない。
   すき間の幅は並べ替えの線と同じ --drop-gap。切れ目を入れている間(#pages.cutting)だけ、すき間を 28px(スマホ幅 34px)に広げてハサミの丸が入るようにする。
   枠線(2px)の外側から始める。 */
.page-cut{position:absolute;z-index:2;display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:inherit}
button.page-cut:hover{background:transparent}
span.page-cut{pointer-events:none}
.page-cut::before{content:"";position:absolute;border:0 dotted #bcc6d4;transition:border-color .12s}
.page-cut::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5a70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E") center/15px no-repeat;box-shadow:0 0 0 1px #c3ccda;opacity:0;transition:opacity .12s}
button.page-cut:hover::before,button.page-cut:focus-visible::before{border-color:#8a97ab}
button.page-cut:hover::after,button.page-cut:focus-visible::after{opacity:1}
button.page-cut:focus-visible{outline:2px solid #8171d3;outline-offset:-2px}
/* 入れた切れ目は分割ページ(task-page.css の button.cut.on)と同じ赤い線と赤い丸。切れ目を入れていない間はすき間が狭いので、線だけを出す(丸を出すとカードに重なる)。 */
.page-cut.on::before{border-color:#de7d79;border-style:solid}
button.page-cut.on::after{opacity:1;background-color:#de7d79;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E");box-shadow:0 0 0 2px #fff}
button.page-cut.on:hover::before{border-color:#d7615c}
span.page-cut::after{display:none}
/* 指で操作する画面には hover が無いので、切れ目を入れている間はハサミの丸を常に出す(押せる場所が分かるように)。 */
@media(pointer:coarse){button.page-cut::after{opacity:1}}
/* ハサミの丸の上にカーソルがあるときは、カードの hover の見た目を出さない(すき間を押そうとしているのに、左のカードが反応して見えないように)。 */
.page-card:not(.selected):has(> .page-cut:hover){border-color:#e2e8f0;background:#fff;box-shadow:0 1px 2px #2030470f}
.page-card.selected:has(> .page-cut:hover){border-color:#8974dc;background:#f4f1fd}
@media(min-width:761px){
 .page-cut{top:0;bottom:0;left:calc(100% + 2px);width:var(--drop-gap,8px)}
 .page-cut::before{top:10px;bottom:10px;left:50%;border-left-width:2px;transform:translateX(-1px)}
 .page-cut.on::before{top:0;bottom:0;border-left-width:3px;transform:translateX(-1.5px)}
 .page-cut::after{transform:translate(-50%,-50%) rotate(90deg)}
 /* 行の右端のカードの切れ目は一覧の右の余白に入るので、右の余白をすき間の幅より広げる。列の数は変えない(すき間が広がった分だけカードを細くする)。 */
 #pages.cutting{column-gap:28px;--drop-gap:28px;padding-right:32px;grid-template-columns:repeat(auto-fill,minmax(max(196px,calc((100% - 112px)/5)),1fr))}
 #pages.cutting[data-size="s"]{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
 #pages.cutting[data-size="l"]{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}
@media(max-width:760px){
 .page-cut{left:0;right:0;top:calc(100% + 2px);height:var(--drop-gap,6px)}
 .page-cut::before{left:10px;right:10px;top:50%;border-top-width:2px;transform:translateY(-1px)}
 .page-cut.on::before{left:0;right:0;border-top-width:3px;transform:translateY(-1.5px)}
 #pages.cutting{row-gap:34px;--drop-gap:34px}
}
/* ==[B] ここまで== */
/* ==[C] 範囲で選ぶ== */
/* 「すべて選択」の隣の、ページ範囲を打って選ぶ欄。見出し「範囲で選ぶ」を枠の中の左に置き、12b 節のボタンと同じ枠・角丸・高さ・文字で1つの部品に見せる(別の見出しの行を足さない)。 */
.range-pick{--range-line:#d5dde8;position:relative;display:inline-flex;align-items:center;flex:none;height:36px;border:1px solid var(--range-line);border-radius:8px;background:#fff;font-size:13px;transition:border-color .12s}
.range-pick:hover{--range-line:#bfc9d6}
.range-pick:has(input[aria-invalid=true]){--range-line:#c44949}
/* 欄は 66px(中身 54px。例の文字「例: 1-3, 5」は 52px、「1-3, 5, 8」は 46px)。2026-09-25: 以前の 100px では 1440px 以上の画面で下段(最大 1176px)に
   左の群 804px+右の群 393px が入らず、右の4つが2段目に折れてページ一覧が 46px 下がった(合格基準 G5・G6)。見出しの左の余白もボタンと同じ 9px にそろえて、枠は 144px。 */
.range-pick label{margin:0;padding:0 2px 0 9px;font-size:13px;color:#5d6b80;white-space:nowrap;cursor:text}
.range-pick input{width:66px;height:100%;min-width:0;border:0;background:transparent;padding:0 8px 0 4px;font-size:13px;color:#203047}
.range-pick input::placeholder{color:#9aa6b8}
/* フォーカスの枠は欄だけでなく見出しごと囲む。 */
.range-pick input:focus-visible{outline:none}
.range-pick:has(input:focus-visible){outline:2px solid #8171d3;outline-offset:2px}
/* 読めない理由(赤)と、ファイル単位でまとまりごと選んだことの断り(灰)。枠の下に浮かせて、帯の高さも右の「回転」などの位置も動かさない。
   浮かせた札の下のカードをそのまま押せるよう、押す操作は素通りさせる(押して選び直せば札は消える)。 */
.range-note{position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:min(360px,calc(100vw - 32px));padding:6px 10px;border:1px solid #ebc4c4;border-radius:6px;background:#fff;color:#b23b3b;font-size:12px;line-height:1.5;white-space:normal;box-shadow:0 4px 12px #24334b1a;pointer-events:none}
.range-note.info{border-color:#d5dde8;color:#4b5a75}
@media(max-width:760px){
 /* スマホ幅は選択の段(横スクロール)の下に1段を取る(app.js が要素をそこへ移す)。左に欄、右の残りは理由の置き場として空けておき、
    理由が出ても段の高さは変わらず、下の「並べ替え」などを札で隠さない。枠は欄の部分(::before)だけに引く。 */
 .range-pick{display:grid;grid-template-columns:auto 120px minmax(0,1fr);flex:1 1 100%;height:44px;border:0;background:none}
 .range-pick::before{content:'';grid-area:1/1/2/3;align-self:stretch;border:1px solid var(--range-line);border-radius:8px;background:#fff;transition:border-color .12s}
 .range-pick label{grid-area:1/1;align-self:stretch;display:flex;align-items:center;padding-left:10px}
 /* iPhone は16px未満の入力欄に触れると画面を拡大するので、スマホ幅の欄は16px(2026-09-24 ユーザー指示)。
    余白は PC 幅で詰める前の値のまま(2026-09-25。スマホ幅は欄が1段を取るので詰めなくてよい) */
 .range-pick input{grid-area:1/2;width:auto;font-size:16px;padding:0 10px 0 6px}
 .range-pick:has(input:focus-visible){outline:none}
 .range-pick:has(input:focus-visible)::before{outline:2px solid #8171d3;outline-offset:2px}
 .range-note{grid-area:1/3;position:static;width:auto;max-width:none;padding:0 0 0 10px;border:0;background:none;box-shadow:none;font-size:11.5px;line-height:1.35}
}
/* ==[C] ここまで== */
/* ==[D] 並べ替えの取っ手== */
/* 取っ手(点6つ、drag-grip.js の dragHandle)。並べ替えできる他のページ(task-page.css の .drag-grip)と同じ見た目。編集画面は task-page.css を読まないので、ここで同じ形にする。
   番号の左に置き、サムネイル・番号・操作とは4px以上離す。指のドラッグは取っ手と番号から始まる(touch-reorder.js)。パソコンではカードをどこからでもドラッグできる(取っ手は目印)。 */
.drag-grip{flex:none;display:flex;align-items:center;justify-content:center;color:#74839a;cursor:grab;touch-action:none}
.drag-grip svg{flex:none;width:18px;height:18px;fill:currentColor;stroke:none}
.page-card:hover .drag-grip,.drag-grip:hover{color:#203047}
.page-card.touch-dragging .drag-grip{cursor:grabbing}
.page-card .page-grip{position:absolute;top:7px;left:4px;width:28px;height:34px;margin:0}
.page-card .page-number{left:36px}
@media(max-width:760px){
 /* 1ページ1行: 取っ手 | 番号 | サムネイル | 右の欄。取っ手の当たり判定は 32×64。番号の列は 26px、サムネイルは 48px(A4縦は 60px の高さで幅 43px なので縮まない)、すき間は 4px。
    右の欄は2段(2026-09-24): 上の段にチェックとファイル名(2行まで、その先は「…」)、下の段に操作ボタン(36×36)を名前の頭にそろえて左から並べ、page N / ○ページ は同じ段の右端に置く。
    以前は操作ボタンが行の右側を占め、ファイル名の欄が 375px で 50px しかなく「見積書 / _2026…」のように3〜4文字ずつしか読めなかった(今は 375px で約 198px)。
    カードの高さは 78px 以内に保つ(名前2行 = 行の高さ 1.3 で 31px + ボタン 36px + 上下の余白 3px + 枠)。
    ファイル単位の範囲(「10–12」など)が番号の列に入らないときは「–」の後で2行に折り返す。 */
 .page-card{grid-template-columns:32px 26px 48px minmax(0,1fr);grid-template-rows:auto 36px;column-gap:4px;row-gap:0;padding-block:3px}
 .page-card>:is(.page-grip,.page-number,.thumb){grid-row:1/3}
 .page-card .page-grip{position:static;width:32px;height:64px}
 .page-card .page-number{min-width:0;text-align:center;line-height:1.25}
 .page-card .thumb{width:48px}
 .page-card .thumb canvas{max-width:44px}
 /* 右の欄(.caption)は2段にまたがり、下の段(36px)は操作ボタンと同じ高さ。欄の中も同じ2段にして、page N を下の段の右端に置く。 */
 .page-card .caption{grid-column:4;grid-row:1/3;align-self:stretch;grid-template-rows:auto 36px;row-gap:0}
 .page-card .caption .name{line-height:1.3}
 /* 右端の札(page N / ○ページ)は縮めず、いつも全部読めるようにする(2026-09-24。以前は欄が狭いと札の方を「…」で縮め、320px で「page 1」が 5px、「12ページ」が「1」だけになっていた)。
    札は下の段の右端。操作ボタンは右の欄の頭から 9px + 36px × 数(4つで 153px、ファイル単位のまとまりは編集が無く3つで 117px)まで。
    その右に 4px 空けて札が入らない欄の幅では、札を上の段(ファイル名の右)へ移し、ファイル名の方を狭くする(下の [D2])。 */
 /* 欄の幅で札の置き場を決めるので、欄を幅の問い合わせ先にする。上の段に札を置くための3列目(ふだんは幅 0)を用意し、列の間隔はチェックの右の余白 6px で取る(間隔にすると空の3列目の前にも 6px 空くため)。 */
 .page-card .caption{container:page-caption/inline-size;grid-template-columns:auto minmax(0,1fr) auto;column-gap:0}
 .page-card .caption input{margin:2px 6px 0 0}
 .page-card .file-count,.page-card .source-page{grid-column:2/4;grid-row:2;align-self:center;justify-self:end;flex:none;min-width:max-content;overflow:visible}
 /* 操作ボタンは下の段の左から。左の余白 9px で、最初のアイコン(ボタンの中央 16px)の左端がファイル名の頭にそろう(チェック 13px + すき間 6px = 19px = 9px + 10px)。 */
 .page-card>.page-actions{grid-column:4;grid-row:2;justify-self:start;align-self:end;margin-left:9px}
 .page-actions button{width:36px;height:36px}
}
/* [D2] 札が下の段に入らない幅(4つのボタンは欄 214px 未満=おおむね 372px 未満の画面、3つのボタンは 190px 未満=おおむね 348px 未満)では、札を上の段の右端に置く。
   欄の幅で決めるので、スクロールバーのある拡大表示でも同じように働く。札の幅は「page 1000」「123ページ」まで見込んでいる。 */
@media(max-width:760px){
 @container page-caption (max-width:213.98px){
  .page-card:not(.file-stack) :is(.file-count,.source-page){grid-column:3;grid-row:1;align-self:start;justify-self:end;margin:0 0 0 6px}
 }
 @container page-caption (max-width:189.98px){
  .page-card.file-stack :is(.file-count,.source-page){grid-column:3;grid-row:1;align-self:start;justify-self:end;margin:0 0 0 6px}
 }
}
/* 移動ボタン(上へ/下へ): タッチの画面の狭い幅では、並べ替えは取っ手のドラッグで行うので見た目からは外す(2026-09-24)。
   ただしキーボードやスクリーンリーダーにはドラッグ以外の唯一の並べ替えなので、読み上げの対象とフォーカスの順には残し、Tab で来たら2つとも普通に出す(WCAG 2.5.7)。
   マウスの画面を狭くした(拡大した)パソコンは、狭い幅でも普通に出す。場所を取らないよう、隠している間は流れの外(position:absolute)に置く。 */
@media(max-width:760px) and (pointer:coarse){
 .workspace-bar .tools:not(:has(#move-left:focus-visible,#move-right:focus-visible)) :is(#move-left,#move-right){position:absolute;width:1px;height:1px;min-width:0;min-height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* ==[D] ここまで== */
/* ==[E] スマホ幅の下段(選択と装飾の操作)を切らない== */
/* 7 節で折り返すようにした下段の、後の節の指定に勝つ必要がある分だけをここに置く(2026-09-24)。
   回転は2段目の行頭になるので左の余白を取らない。装飾の4つ(用紙・並べ替え・ページ番号・透かし)は、間隔 4px・左右の余白 5px・並べ替えの幅 112px で 375px の1段に収める(より狭い画面では折り返す)。 */
@media(max-width:760px){
 .workspace-bar #rotate{margin-left:0}
 .workspace-bar .document-decoration-tools{gap:4px}
 .workspace-bar .document-decoration-tools button{padding-inline:5px}
 .document-decoration-tools #sort-pages{width:112px}
}
/* ==[E] ここまで== */
/* 知らせの欄に長い連続した文字(ファイル名など)が入っても横にはみ出さないように折り返す(2026-09-26)。 */
#error,.dialog-error{overflow-wrap:anywhere}
/* ==[S8] 2026-09-27 点検の指摘の手直し(編集画面と作業ページ)== */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 指の端末にはドラッグ＆ドロップの案内を出さない(指摘11)。 */
@media(hover:none) and (pointer:coarse){#empty .drag-hint{display:none}}
/* 開始前の作業メニューの幅の指定(max-width:1180px)は、メニューが画面から無くなっていたので外した(指摘16。main の最大幅 1600px にそろえる)。 */
/* ページ一覧の列数を幅に合わせる(指摘16。以前は「最大5列」の式で、1440〜1600px では1枚が 270〜310px に広がり、サムネイル(中は幅 190px まで)の周りの余白だけが増えた)。 */
@media(min-width:761px){
 #pages[data-size="m"]{grid-template-columns:repeat(auto-fill,minmax(212px,1fr))}
 #pages.cutting[data-size="m"]{grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
}
/* スマホ幅の選択のチェックを押しやすくする(指摘15。以前は 13px)。 */
@media(max-width:760px){.page-card .caption input[type=checkbox]{width:20px;height:20px;margin-top:0}}

/* 作業ページ(/sign/ /fill/ /add-text/。body.task-mode)の最初の画面: ほかの作業ページ(task-page.css)と同じ並び(指摘11)。 */
#task-head{max-width:720px;margin:28px auto 0;padding:0 20px;box-sizing:content-box}
#task-head h1{margin:0 0 8px;font-size:28px;font-weight:650;line-height:1.35;letter-spacing:-.01em}
#task-head .task-lead{margin:0 0 6px;color:#4a5a70;font-size:15px;line-height:1.7}
body.task-mode:not(.has-pages) #empty{min-height:0;padding:40px 20px 34px;gap:0}
body.task-mode #empty .drop-icon{width:52px;height:52px;margin-bottom:14px;fill:none;stroke:#8a97ab;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.task-mode #empty .drag-hint{margin:14px 0 0;font-size:14px;color:#4a5a70}
body.task-mode #empty .drop-sub{margin:6px 0 0;font-size:12.5px;color:#74839a;text-align:center}
body.task-mode .page-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;max-width:720px;margin:18px auto 0;font-size:13.5px}
body.task-mode .page-links a{display:inline-flex;align-items:center;min-height:44px;color:#3e4f68;text-decoration:none}
body.task-mode .page-links a:hover{text-decoration:underline}
body.task-mode .link-strong{font-weight:650;margin-left:.3em;color:#203047}
body.task-mode.has-pages .page-links{display:none}
@media(max-width:620px){#task-head{margin-top:20px;padding:0 20px}#task-head h1{font-size:24px}#task-head .task-lead{font-size:14px}body.task-mode .page-links{flex-direction:column;gap:0}body.task-mode #empty #start{width:100%;max-width:320px;justify-content:center}}
/* 読み込んだ後: 見出しは残し(説明は隠す)、操作は「もう一度編集」「最初からやり直す」「保存」だけにする(指摘6)。
   ページの選択・回転・削除・並べ替え・切れ目・表示の切り替えは /edit/ の操作なので出さない。ページのカードは押すと編集画面が開く。 */
body.task-mode.has-pages #task-head{max-width:none;margin:14px 12px 0;padding:0 4px}
body.task-mode.has-pages #task-head h1{font-size:20px;margin:0}
body.task-mode.has-pages #task-head .task-lead{display:none}
body.task-mode .toolbar .tools>:not(#task-edit,#clear,#count,#save){display:none}
body.task-mode .toolbar #task-edit{display:inline-flex}
body:not(.has-pages) .toolbar #task-edit{display:none}
body.task-mode .workspace-bar,body.task-mode .view-bar{display:none}
body.task-mode .page-actions>:not(.page-edit),body.task-mode .page-card .caption input,body.task-mode .page-card .drag-grip{display:none}
body.task-mode .page-card{cursor:pointer}

/* 編集画面のページ送り(指摘5)。見出しの右、閉じるボタンとは離して置く。 */
#editor .editor-pages{display:flex;align-items:center;gap:2px;margin:0 16px 0 auto;font-size:13px;color:#4d5c73;font-variant-numeric:tabular-nums;white-space:nowrap}
#editor .editor-pages[hidden]{display:none}
#editor .editor-pages button{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;font-size:inherit}
#editor .editor-pages svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
#editor #editor-page{min-width:64px;text-align:center}
@media(max-width:760px){#editor .editor-pages button{width:40px;height:40px}#editor #editor-page{min-width:56px}#editor .editor-pages{margin-right:8px}}

/* 小さく見えるもの(app.js の paintOverlay が .compact を付ける。短い辺が 48px 未満)は、四隅の取っ手をものの外へ離し、辺の取っ手は出さない(指摘4)。 */
.overlay.compact .handle-nw{left:-8px;top:-8px}.overlay.compact .handle-ne{left:calc(100% + 8px);top:-8px}
.overlay.compact .handle-se{left:calc(100% + 8px);top:calc(100% + 8px)}.overlay.compact .handle-sw{left:-8px;top:calc(100% + 8px)}
.overlay.compact :is(.handle-n,.handle-s,.handle-w,.handle-e){display:none!important}

/* 記入欄の一覧(指摘3)。スマホ幅だけ、ページの下に欄を縦に並べる。ページの上の欄と同じ値を書き換える。 */
#form-list{display:none}
@media(max-width:760px){
 #form-list:not([hidden]){display:flex;flex-direction:column;gap:10px;flex:none;margin:10px 0 0;padding:10px 12px 12px;border:1px solid #dce2eb;border-radius:10px;background:#fafbfd}
 #form-list h3{margin:0;font-size:13px;font-weight:600;color:#4d5c73}
 #form-list .form-row{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:4px;margin:0;padding:0;border:0;font-size:13px;color:#4a5a70;min-width:0}
 #form-list .form-row-checkbox{flex-direction:row;align-items:center;gap:10px;min-height:44px}
 #form-list .form-row-choices{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px}
 #form-list .form-row-choices legend{padding:0;margin-bottom:4px;width:100%}
 #form-list .form-row-choices label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;color:#203047}
 #form-list .form-list-field:not([type=checkbox]):not([type=radio]){width:100%;min-height:44px;padding:8px 10px;border:1px solid #c9d2df;border-radius:8px;background:#fff;font-size:16px;color:#203047}
 #form-list textarea.form-list-field{min-height:72px;resize:vertical}
 #form-list .form-list-field:is([type=checkbox],[type=radio]){width:22px;height:22px;margin:0;accent-color:#253247}
 #form-list .form-list-field:disabled{background:#eef0f3}
 /* 一覧があるときは、ダイアログ全体をスクロールして一覧まで行けるようにし、ページの表示は 260px 以上を保つ。 */
 #editor[open]:has(#form-list:not([hidden])){overflow-y:auto}
 #editor:has(#form-list:not([hidden])) #stage-wrap{flex:0 0 auto;height:min(52dvh,420px);min-height:260px}
 /* 一覧までスクロールしても「完了」(適用して閉じる)と倍率の行は下に見えたままにする。 */
 #editor:has(#form-list:not([hidden])) .dialog-footer{position:sticky;bottom:-14px;z-index:5;margin-inline:-14px;margin-bottom:-14px;padding:8px 14px 14px;background:#fff;box-shadow:0 -1px 0 #e3e8f0}
}

/* スマホ幅の編集画面の道具を詰める(指摘8)。「追加」の見出しと追加のボタンは横スクロールの1行、倍率の操作も1行にする。 */
@media(max-width:760px){
 #editor .add-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-3px;padding:2px 3px}
 #editor .add-tools::-webkit-scrollbar{display:none}
 #editor .add-tools>*{flex:none}
 #editor .add-caption{flex-basis:auto;margin:0 2px 0 4px}
 #editor .dialog-footer{flex-wrap:nowrap;gap:6px}
 #editor .zoom-tools{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none}
 #editor .zoom-tools::-webkit-scrollbar{display:none}
 #editor .zoom-tools #zoom-reset{min-width:46px;padding-inline:2px}
 #editor .zoom-tools #zoom-width{margin-left:0}
 #editor .zoom-tools .zoom-label{display:none}
 #editor #editor-done{flex:none;padding-inline:12px}
}
/* パソコン幅では、選んだものの設定の段(文字・サイズ・色・幅など)の高さを最初から空けておき、文字を足しても表示の倍率とページの位置を変えない(指摘14)。 */
@media(min-width:761px){#editor .edit-tools{min-height:var(--edit-tools-reserve,0px);align-content:flex-start}}
#editor .label-short{display:none}
#editor .edit-tools #edit-tools-empty{margin:0;align-self:center;font-size:12px;color:#8391a5}
@media(max-width:760px){
 #editor :is(#zoom-width,#zoom-page) .label-long,#editor #editor-done .label-long{display:none}
 #editor #editor-done .label-short{display:inline}
 #editor .edit-tools #edit-tools-empty{display:none}
 /* 作業ページの読み込んだ後の操作を1段に収める(ページ数は一覧で分かるので出さない)。 */
 body.task-mode .toolbar #count{display:none}
 body.task-mode .toolbar :is(#task-edit,#clear){font-size:13px;padding-inline:8px}
 body.task-mode .toolbar #clear svg{display:none}
}
#form-list{text-align:left}
body.task-mode.has-pages #task-head{margin:14px 0 0;padding:0}
/* 横向きなどの低い画面では、設定の空き段よりページの表示領域を優先する。
   ダイアログ全体をスクロールできるようにし、道具と適用操作も残す。 */
@media(max-height:500px){
 #editor[open]{overflow-y:auto}
 #editor .edit-tools{min-height:0}
 #editor #stage-wrap{flex:0 0 max(180px,56dvh);min-height:180px;padding:12px}
}
/* ==[S8] ここまで== */