/* 作業台：上に道具帯，中央に紙面（そのまま編集），左に TeX（任意），右に設定。紙面だけは常に白黒 */
[hidden]{display:none!important}
:root{
  --bg:#e7e9ec; --panel:#ffffff; --panel2:#f4f5f7; --fg:#1c2027; --muted:#646c79; --line:#d2d6dd;
  --accent:#1f4f8f; --accent-fg:#ffffff; --accent-soft:#e2ebf8; --warn:#9a3b12; --danger:#a3271b; --desk:#80868f; --sel:#2b6fd6;
  --ui:'Noto Sans JP',system-ui,-apple-system,'Hiragino Sans',sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#15181d;--panel:#1d2128;--panel2:#252a33;--fg:#e6e9ee;--muted:#9aa3b2;--line:#363d49;--accent:#8db4ec;--accent-fg:#0f1621;--accent-soft:#233349;--warn:#f0a27c;--danger:#f08a7e;--desk:#2b3038;--sel:#6fa3f0;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#15181d;--panel:#1d2128;--panel2:#252a33;--fg:#e6e9ee;--muted:#9aa3b2;--line:#363d49;--accent:#8db4ec;--accent-fg:#0f1621;--accent-soft:#233349;--warn:#f0a27c;--danger:#f08a7e;--desk:#2b3038;--sel:#6fa3f0;color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:13px;display:flex;flex-direction:column;gap:6px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));padding-block:8px;box-sizing:border-box}
button,select,input,textarea{font:inherit;color:inherit}
button{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:4px 10px;cursor:pointer;line-height:1.3;white-space:nowrap}
button:hover{border-color:var(--muted)}
button.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
button.danger{color:var(--danger)}
button:disabled{opacity:.5;cursor:not-allowed}
button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
:is(button,select,input,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:1px}
select,input{border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:4px 6px;min-width:0}
.muted{color:var(--muted)}.small{font-size:11.5px;line-height:1.6}.warnmsg{color:var(--warn)}.grow{flex:1}

.bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.brand{font-weight:700;font-size:15px;letter-spacing:.06em;padding-right:6px}
.fld{display:flex;align-items:center;gap:6px;color:var(--muted)}
.fld select{color:var(--fg);max-width:240px}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--line);border-radius:7px;padding:6px 10px}

.ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.ribbon .grp{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding-right:10px;border-right:1px solid var(--line)}
.ribbon .grp:last-child{border-right:0;padding-right:0}
.ribbon button{min-height:28px;padding:2px 8px;display:inline-flex;align-items:center}
.ribbon #style{min-height:28px;width:150px}
.ribbon .pg.ico{width:auto;height:auto;position:static;overflow:visible;background:transparent;color:inherit;display:inline-flex;font-size:9pt;line-height:1}
.ribbon .pg.ico>span{margin:0;vertical-align:0;color:var(--fg);border-color:currentColor}
.ribbon .pg.ico .sel>span,.ribbon .pg.ico .th>span{border-color:currentColor}

.work{flex:1;min-height:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) 240px;grid-template-areas:"desk side"}
body.show-tex .work{grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr) 240px;grid-template-areas:"tex desk side"}
body.hide-side .work{grid-template-columns:minmax(0,1fr);grid-template-areas:"desk"}
body.show-tex.hide-side .work{grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);grid-template-areas:"tex desk"}
body:not(.show-tex) .ed-text,body.hide-side .side{display:none}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.ed-text{grid-area:tex}.desk{grid-area:desk}.side{grid-area:side}
.ph{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--panel2)}
.ph h2{font-size:12px;margin:0;letter-spacing:.1em}
#src{flex:1;min-height:0;border:0;resize:none;padding:10px 12px;background:var(--panel);font-family:var(--mono);font-size:12.5px;line-height:1.7;white-space:pre-wrap}
.help{font-size:12px;position:relative}
.help summary{cursor:pointer;color:var(--accent)}
.help table{position:absolute;z-index:20;top:22px;right:0;width:min(600px,80vw);background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.18);border-collapse:collapse}
.help td{padding:5px 8px;border-top:1px solid var(--line);vertical-align:top;line-height:1.55}
.help code{font-family:var(--mono);font-size:11.5px;background:var(--panel2);padding:0 3px;border-radius:3px;overflow-wrap:anywhere}

/* --- 紙面（机） --- */
#pv{flex:1;overflow:auto;background:var(--desk);padding:24px}
#pv.drop{outline:3px dashed var(--accent);outline-offset:-8px}
#pages{display:flex;flex-direction:column;align-items:center;gap:20px}
.sheet{position:relative;flex:none;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.sheet .inner{transform-origin:top left;width:516pt;height:728pt}
#measure,#measure2{position:absolute;left:-20000px;top:0;visibility:hidden;pointer-events:none}
.statusbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:5px 10px;border-top:1px solid var(--line);background:var(--panel2);font-size:12px}
.statusbar .where{font-weight:700;color:var(--accent);min-width:6em}
.statusbar button{padding:1px 8px}

/* 紙面の上での編集の手がかり（書き出しには出ない） */
#pages [data-field]{outline:none;cursor:text;caret-color:#000}
#pages [data-field]:empty::after{content:'\200b'}
#pages .pg ::selection{background:#b6d1f7}
#pages [data-path]:not([data-field]){cursor:default}
#pages [data-path]:not([data-field]):hover{box-shadow:0 0 0 1px #8fb4ea}
#pages [data-field]:focus{background:rgba(43,111,214,.045)}
#pages .selblk{box-shadow:0 0 0 2px var(--sel)!important}
#pages .atom{cursor:pointer;border-radius:2px}
#pages .atom:hover{background:rgba(43,111,214,.14)}
#pages .pbmark{position:absolute;left:0;right:0;bottom:-6pt;height:0;border-top:1px dashed #6a8fc8}
#pages .pbmark::after{content:'改ページ';position:absolute;right:0;top:-1px;transform:translateY(-50%);background:#fff;color:#4f74ad;font:9px var(--ui);padding:0 4px}
#pages .pbmark:hover,#pages .pbmark.selblk{border-top-width:2px}
#pages .bd[data-bt="draft"]::before{content:'下書き用紙（右クリックで取り除けます）';position:absolute;left:0;right:0;top:40%;text-align:center;color:#9aa6b8;font:11px var(--ui)}

/* --- 右の欄 --- */
.side{display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0}
.side details{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.side summary{cursor:pointer;font-weight:700;font-size:12px;letter-spacing:.06em;margin-bottom:6px}
.side .row{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted);margin-bottom:8px}
.side .row input,.side .row select{color:var(--fg)}
.side .chk{display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.45;margin-bottom:6px}
.side .chk input{margin-top:3px}
.side .wide{width:100%;margin-top:6px}
#assets{display:flex;flex-direction:column;gap:6px}
.asset{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:6px}
.asset img{width:44px;height:34px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:3px}
.asset code{font-family:var(--mono);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.asset button{padding:2px 6px;font-size:11px}

/* --- 右クリックメニュー --- */
.cm{position:fixed;z-index:80;min-width:220px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:4px;display:flex;flex-direction:column;font-size:12.5px}
.cm.sub{position:absolute;display:none;top:0}
.cm.sub.open{display:flex}
.cmi{position:relative;display:grid;grid-template-columns:16px 1fr auto 10px;align-items:center;gap:6px;text-align:left;border:0;background:none;border-radius:5px;padding:5px 8px;width:100%}
.cmi:hover,.cmi:focus-visible{background:var(--accent-soft);outline:none}
.cmi .ck{color:var(--accent);font-weight:700}
.cmi .kb{color:var(--muted);font-size:11px;font-family:var(--mono)}
.cmi .ar{color:var(--muted)}
.cmsep{height:1px;background:var(--line);margin:4px 6px}
.cmhead{font-size:10.5px;color:var(--muted);letter-spacing:.1em;padding:4px 8px 2px}

/* --- 小窓 --- */
.veil{position:fixed;inset:0;z-index:89;background:rgba(10,14,20,.28)}
.dlg{position:fixed;z-index:90;left:50%;top:12%;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));max-height:80vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.3);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.dlg.wide{width:min(620px,calc(100vw - 32px))}
.dt{font-weight:700;font-size:14px}
.db{display:flex;flex-direction:column;gap:9px}
.df{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.df.chk{flex-direction:row;align-items:center;gap:6px;color:var(--fg)}
.df input[type=text],.df textarea,.df select{color:var(--fg);font-size:13px}
.df textarea{font-family:var(--mono);border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--panel);resize:vertical;line-height:1.6}
.dpv{border:1px solid var(--line);border-radius:8px;padding:6px 10px;background:#fff}
.dpv .dpl{display:block;font-size:10.5px;color:#6b7380;letter-spacing:.08em;margin-bottom:2px}
.dpv .pg.rich{position:static;width:auto;height:auto;overflow:visible;min-height:20pt}
.dbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dx{display:flex;gap:6px;flex-wrap:wrap}

.flash{position:fixed;z-index:95;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:8px;font-size:12.5px;max-width:min(560px,90vw);box-shadow:0 6px 20px rgba(0,0,0,.25)}

@media (max-width:900px){
  .work,body.show-tex .work{grid-template-columns:minmax(0,1fr);grid-template-areas:"desk" "tex" "side";grid-template-rows:minmax(480px,1fr) auto auto}
  body{height:auto;min-height:100%}
  .ed-text{min-height:300px}
}