:root{
  --ground:#f2f4f3;
  --panel:#ffffff;
  --ink:#2b3138;
  --ink-soft:#5b636c;
  --haze:#9aa0a6;
  --line:#e0e3e1;
  --sky:#3f81b4;
  --sky-deep:#264a68;
  --ember:#d0824f;
  --stage-bg:#e7ebe8;
  --paper:#fbfaf6;
  --focus:#3f81b4;
  --shadow:0 1px 2px rgba(30,40,50,.06), 0 8px 24px rgba(30,40,50,.10);
  color-scheme:light;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --ground:#171b1e;
    --panel:#20262a;
    --ink:#e7eae9;
    --ink-soft:#a9b0b4;
    --haze:#7f868b;
    --line:#333b40;
    --sky:#6aa8d6;
    --sky-deep:#a9cbe4;
    --ember:#e0996a;
    --stage-bg:#0f1214;
    --paper:#fbfaf6;
    --focus:#6aa8d6;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#171b1e;
  --panel:#20262a;
  --ink:#e7eae9;
  --ink-soft:#a9b0b4;
  --haze:#7f868b;
  --line:#333b40;
  --sky:#6aa8d6;
  --sky-deep:#a9cbe4;
  --ember:#e0996a;
  --stage-bg:#0f1214;
  --paper:#fbfaf6;
  --focus:#6aa8d6;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

.topbar{
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;border-bottom:1px solid var(--line);
  background:var(--panel);position:sticky;top:0;z-index:20;
}
.brand{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand b{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;font-size:15px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brand span{font-size:11px;color:var(--ink-soft);letter-spacing:.02em}
.topbar .sp{flex:1}
.tag{
  font-size:11px;color:var(--ink-soft);border:1px solid var(--line);
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.btn{
  border:1px solid var(--line);background:var(--panel);
  padding:7px 13px;border-radius:9px;font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;gap:7px;transition:background .12s,border-color .12s;
}
.btn:hover{border-color:var(--haze)}
.btn[aria-pressed="true"]{background:var(--sky);border-color:var(--sky);color:#fff}
.btn-save{background:var(--ember);border-color:var(--ember);color:#fff}
.btn-save:hover{filter:brightness(1.04);border-color:var(--ember)}
.btn-save[disabled]{opacity:.5;cursor:default}

.stage{
  display:flex;align-items:center;justify-content:center;
  padding:34px 16px 8px;
}
.page{
  width:min(92vw, 78vh, 740px);aspect-ratio:1/1;
  background:var(--paper);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;position:relative;display:flex;flex-direction:column;
  color:#2b3138;padding:7% 7% 0;
}
.art{
  flex:1 1 56%;min-height:0;position:relative;border-radius:9px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.art img{width:100%;height:100%;object-fit:contain;display:block}
.art .placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;
  padding:8% 14%;color:#6b7178;
}
.art .placeholder .pi{
  width:38px;height:38px;border-radius:50%;border:1.5px dashed #b7bcbf;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.art .placeholder small{font-size:11px;line-height:1.8}
.art.drop{outline:3px solid var(--sky);outline-offset:-3px}

.caption{
  flex:0 0 auto;background:transparent;
  display:flex;justify-content:center;
  padding:6.5% 6% 9%;
}
.caption p{
  margin:0;max-width:100%;word-break:keep-all;overflow-wrap:normal;
  font-family:"Zen Maru Gothic",sans-serif;font-weight:400;
  font-size:clamp(11px,1.55vw,13.5px);line-height:2.35;letter-spacing:.03em;
  white-space:pre-wrap;color:#3a4046;text-align:center;
}
.caption p[contenteditable="true"]{
  outline:1.5px dashed var(--sky);outline-offset:6px;border-radius:8px;
}
.caption.pos-top{order:-1}
.caption.hidden{display:none}
.page .num{
  position:absolute;bottom:10px;right:14px;font-size:10px;color:#9aa0a6;
  font-family:"Zen Maru Gothic",sans-serif;letter-spacing:.04em;
}

/* cover */
.page.cover{padding:9% 9% 0}
.page.cover .art{align-items:stretch;border-radius:10px}
.cover-plate{
  position:absolute;inset:auto 0 0 0;padding:14% 12% 16%;
  background:linear-gradient(to top, rgba(251,250,246,.96) 48%, rgba(251,250,246,0));
  text-align:center;
}
.cover.plate-top .cover-plate{inset:0 0 auto 0;padding:16% 12% 12%;
  background:linear-gradient(to bottom, rgba(251,250,246,.96) 48%, rgba(251,250,246,0));}
.cover-plate h1{
  font-family:"Zen Maru Gothic",sans-serif;font-weight:700;
  font-size:clamp(17px,3.6vw,24px);line-height:1.65;margin:0 0 .7em;
  letter-spacing:.02em;color:#243b52;text-wrap:balance;
}
.cover-plate p{margin:0;font-size:clamp(10px,1.9vw,12.5px);color:#5b636c;line-height:1.9;letter-spacing:.02em}
.cover-plate .by{margin-top:1.4em;font-size:clamp(10px,1.7vw,11.5px);color:#33383e;letter-spacing:.03em}
.cover-plate input{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:7px;
  padding:6px 9px;font:inherit;text-align:center;margin-top:6px;color:var(--ink);
}

/* colophon */
.page.colophon{background:var(--paper)}
.page.colophon .art{align-items:center;justify-content:center;padding:14% 10%}
.colo{
  font-family:"Zen Maru Gothic",sans-serif;text-align:center;
  font-size:clamp(10.5px,1.7vw,13px);line-height:2.3;color:#3a4046;
  white-space:pre-wrap;letter-spacing:.02em;max-width:100%;word-break:keep-all;overflow-wrap:normal;
}
.page.colophon .colo[contenteditable="true"]{
  outline:1.5px dashed var(--sky);outline-offset:10px;border-radius:8px;
}

.controls{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:6px 16px 14px;flex-wrap:wrap;
}
.nav{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.nav[disabled]{opacity:.35;cursor:default}
.counter{
  font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  min-width:64px;text-align:center;
}

.strip{
  display:flex;gap:8px;overflow-x:auto;padding:10px 16px 18px;
  scrollbar-width:thin;
}
.strip button{
  flex:0 0 auto;width:52px;height:52px;border-radius:7px;overflow:hidden;
  border:2px solid transparent;background:var(--stage-bg);padding:0;position:relative;
}
.strip button.on{border-color:var(--sky)}
.strip button img{width:100%;height:100%;object-fit:cover}
.strip button i{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--haze);font-style:normal;
}

/* inspector */
.inspector{
  border-top:1px solid var(--line);background:var(--panel);
  padding:16px;display:grid;gap:16px;
}
.inspector h3{
  margin:0;font-family:"Zen Maru Gothic",sans-serif;font-size:13px;
  letter-spacing:.04em;color:var(--ink-soft);text-transform:none;
}
.insp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));max-width:900px;margin:0 auto;width:100%}
.field{display:grid;gap:7px}
.field label{font-size:12px;color:var(--ink-soft)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{padding:6px 12px;font-size:12px;background:var(--panel);border:0;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--sky);color:#fff}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatches button{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.12)}
.swatches button.on{box-shadow:0 0 0 2px var(--sky)}
.artnote{
  font-size:12px;line-height:1.7;color:var(--ink-soft);
  background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
}
.filebtn{
  display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--haze);
  border-radius:8px;padding:9px 13px;font-size:13px;background:var(--panel);
}
.linklike{background:none;border:0;color:var(--sky);font-size:12px;padding:0;text-decoration:underline}

.about{max-width:640px;margin:8px auto 40px;padding:0 20px;color:var(--ink-soft);font-size:13px;line-height:1.9}
.about details{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:2px 14px}
.about summary{cursor:pointer;padding:12px 0;font-size:13px;color:var(--ink);font-family:"Zen Maru Gothic",sans-serif}
.about ol{margin:0 0 14px;padding-left:1.3em}
.about li{margin:.4em 0}

.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
  background:var(--sky-deep);color:#fff;padding:10px 16px;border-radius:10px;
  font-size:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:50;max-width:88vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
:root[data-theme="dark"] .toast, :root:not([data-theme="light"]) .toast{color:#0f1214}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:var(--sky)}}
:root[data-theme="dark"] .toast{background:var(--sky)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.print-root{display:none}
@media print{
  .topbar,.controls,.strip,.inspector,.about,.stage,.toast{display:none!important}
  .print-root{display:block}
  .print-root .page{
    width:18cm;height:18cm;aspect-ratio:auto;margin:0 auto;
    box-shadow:none;border-radius:0;page-break-after:always;break-after:page;
  }
  @page{size:20cm 20cm;margin:1cm}
}