@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root{--ink:#28332e;--muted:#858d86;--green:#326b50;--border:#e1e4dc}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#292c2b;font:12px 'Noto Sans JP',system-ui,sans-serif}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:white;color:var(--ink);border-radius:6px;padding:8px 12px}button:hover{background:#edf2eb}button:disabled{opacity:.35;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #8cb087;outline-offset:3px}.topbar{height:76px;display:flex;align-items:center;padding:0 24px;gap:26px;border-bottom:1px solid var(--border);background:white}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:17px;font-weight:800;white-space:nowrap}.brand-mark{background:var(--green);color:white;border-radius:8px;font-size:26px;padding:0 7px}.badge{font-size:8px;letter-spacing:1px;color:var(--muted);background:#f2f3ef;border:1px solid var(--border);padding:4px 6px;border-radius:4px}.project{border-left:1px solid var(--border);padding-left:24px;flex:1;min-width:110px}.project input{width:100%;max-width:220px;border:0;background:none;font-weight:600;display:block;padding:0;color:var(--ink)}#save-status{font-size:9px;color:var(--muted)}.header-actions{display:flex;gap:8px}.primary{background:var(--green);color:white;border-color:var(--green)}.primary:hover{background:#25523d}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 264px;height:calc(100dvh - 76px);min-height:400px}.board{min-width:0;min-height:0;display:flex;flex-direction:column;color:#eee}.board-heading{padding:27px 28px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{font-size:8px;letter-spacing:2px;color:#91aa98}h1{font-size:23px;font-weight:500;letter-spacing:1px;margin:8px 0 0}.board-heading .primary{background:#d5e4cd;color:#2f4b36;border-color:#d5e4cd;font-size:10px}.board-heading .primary:hover{background:#e4efd9}.toolbar{display:flex;justify-content:space-between;align-items:center;margin:0 28px;padding:7px;background:#353936;border:1px solid #505650;border-radius:8px;gap:8px;flex-wrap:wrap}.tools,.history{display:flex;align-items:center;gap:3px}.toolbar button{border:0;background:none;color:#c0cac2;padding:7px 9px;font-size:17px}.tool{display:flex;align-items:center;gap:6px}.tool span{font-size:10px}.toolbar button:hover{background:#414b42}.toolbar button.active{background:#d5e4cd;color:#2f4b36}.history label{display:flex;gap:8px;align-items:center;font-size:9px;color:#9ca99e;padding-left:8px}.history input{width:60px;accent-color:#a8c1a1}.board-meta{display:flex;justify-content:space-between;font-size:9px;color:#9fa8a0;margin:18px 28px 0;padding-bottom:12px;border-bottom:1px solid #454b45}.board-viewport{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#667066 #2b2e2b}.spread-grid{--scale:1;--columns:4;display:grid;grid-template-columns:repeat(var(--columns),calc(var(--base-width,240px) * var(--scale)));gap:calc(18px * var(--scale));width:max-content;min-width:100%;padding:24px 28px 40px;direction:rtl;justify-content:end;align-content:start}.spread{direction:ltr;display:flex;gap:calc(3px * var(--scale));background:#3b3e3d;border:1px solid #505650;box-shadow:0 3px 7px #0002;border-radius:3px;padding:calc(14px * var(--scale)) calc(12px * var(--scale)) calc(7px * var(--scale));align-items:start;min-width:0}.page-card,.spread-empty{width:50%;min-width:0}.page-card{position:relative;display:flex;flex-direction:column;align-items:center}.page-sheet{width:100%;background:#fff;padding:8%;box-shadow:0 2px 6px #0003;position:relative}.page-card.current .page-sheet{outline:2px solid #a8bea1;outline-offset:3px}.page-sheet svg{width:100%;display:block;height:auto;touch-action:none;user-select:none;overflow:hidden}.page-number{font:11px system-ui,sans-serif;color:#c0c6c1;display:block;width:100%;text-align:center;padding:8px 0 2px;border:0;background:transparent;border-radius:0}.page-number:hover{background:#4d584e;color:#e2efdf}.page-card.current .page-number{color:#deedd7}.page-sheet svg[data-tool=pen]{cursor:crosshair}.page-sheet svg[data-tool=eraser]{cursor:cell}.page-sheet svg[data-tool=text]{cursor:text}.page-sheet svg[data-tool=select]{cursor:default}.page-sheet svg[data-tool=hand],.board-viewport.pan-ready{cursor:grab}.board-viewport.panning,.board-viewport.panning svg{cursor:grabbing!important}.board-viewport.pan-ready svg{cursor:grab!important}.text-object{cursor:move}footer{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-top:1px solid #454b45;background:#303430;gap:12px;font-size:9px;color:#a3aea4;flex-shrink:0}.zoom-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.zoom-controls button{border:0;padding:5px 7px;background:none;color:#d1dacf}.zoom-controls input{width:100px;accent-color:#a8c1a1}.inspector{background:#fbfcf8;border-left:1px solid var(--border);padding:25px 20px;overflow:auto}.inspector-title{display:flex;justify-content:space-between;font-size:13px;font-weight:700;padding-bottom:20px;border-bottom:1px solid var(--border)}.inspector-title span{background:#eaf1e7;padding:3px 7px;border-radius:4px;color:var(--green);font-size:10px}section{padding:22px 0;border-bottom:1px solid var(--border)}.section-label{font-size:11px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.section-label button{font-size:9px;padding:4px 7px}.hint{font-size:9px;color:var(--muted);line-height:1.9;margin:10px 0 12px}.field-label{display:block;font-size:10px;color:#687269;margin:17px 0 8px}textarea{display:block;width:100%;border:1px solid var(--border);background:#fff;border-radius:6px;padding:11px;resize:vertical;line-height:1.8;color:var(--ink);font-size:11px}textarea::placeholder{color:#a4aaa1}textarea:disabled{background:#f0f2eb}#page-note{margin-top:13px}.text-list{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow:auto}.text-list:empty{display:none}.text-list button{text-align:left;font-size:10px;padding:6px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-list button.active{border-color:#789974;background:#edf4e8}.text-settings{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:5px;font-size:9px}.text-settings input{width:43px;padding:4px;border:1px solid var(--border);border-radius:4px}.text-settings button{font-size:9px;padding:5px}.page-order{display:flex;gap:7px;margin:13px 0}.page-order button{font-size:10px;flex:1}.danger{font-size:10px;color:#a47c71;background:none;border:0;padding-left:0}.help-card{padding:16px 12px;margin-top:24px;border:1px solid #e2e8d9;border-radius:7px;background:#f2f6ed}.help-card strong{font-size:10px}.help-card p{font-size:9px;line-height:2;color:var(--muted)}.help-card small{font-size:9px;color:#788a74}#toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:#d5e4cd;color:#2f4b36;padding:12px 22px;border-radius:8px;box-shadow:0 5px 20px #0003;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}#toast.visible{opacity:1}#print-pages{display:none}[hidden]{display:none!important}
@media(max-width:1150px){.spread-grid{--columns:3}.badge{display:none}.topbar{gap:18px}.tool span{font-size:9px}.toolbar{margin:0 20px}.board-heading{padding:24px 20px}.board-meta{margin-left:20px;margin-right:20px}}
@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr) 225px}.spread-grid{--columns:2}.brand{font-size:14px}.topbar{gap:12px;padding:0 16px}.project{padding-left:12px}.header-actions button{font-size:10px;padding:8px}.tool span{display:none}.toolbar button{padding:7px}.board-heading h1{font-size:17px}.zoom-controls input{width:65px}footer>span{max-width:180px}.inspector{padding:20px 14px}}
@media(max-width:600px){.topbar{height:110px;flex-wrap:wrap;padding:12px;gap:8px}.project{flex:1}.header-actions{width:100%;justify-content:flex-end}.workspace{height:calc(100dvh - 110px);grid-template-columns:minmax(0,1fr)}.inspector{max-height:270px;border-top:1px solid var(--border)}.workspace{grid-template-rows:minmax(350px,1fr) 220px}.board-heading{padding:14px}.board-heading h1{font-size:15px}.board-heading .primary{padding:6px}.toolbar{margin:0 12px}.board-meta{margin:10px 12px 0}.spread-grid{--columns:2;padding:20px 15px}.history input{width:45px}footer{padding:8px 12px}footer>span{font-size:8px}.inspector{padding:14px}.inspector-title{padding-bottom:10px}.inspector section{padding:14px 0}.help-card{display:none}}
/* Match the 2 × 1214 by 1720 canvas exactly, with no extra paper margin. */
@media print{
  @page{size:250mm 177.100494mm;margin:0}
  html,body{margin:0;padding:0;background:white;color:#28332e}
  .topbar,.workspace,#toast{display:none!important}
  #print-pages{display:block;margin:0;padding:0}
  .print-spread{position:relative;width:250mm;height:177.100494mm;overflow:hidden;break-after:page;break-inside:avoid}
  .print-spread:last-child{break-after:auto}
  .print-title{position:absolute;z-index:2;left:3%;top:2%;max-width:44%;margin:0;font-size:10pt;font-weight:600;line-height:1.3;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .print-spread-pages{position:absolute;inset:0;display:flex;gap:0;direction:ltr}
  .print-slot{position:relative;width:50%;height:100%;flex:0 0 50%}
  .print-slot svg{display:block;width:100%;height:100%}
  .print-page-number{position:absolute;z-index:2;right:3%;bottom:2%;margin:0;font:9pt system-ui,sans-serif;text-align:right;color:#28332e}
  .selection-outline,.text-resize-handle{display:none}
}

/* Page layout stays in world coordinates; the camera moves without scroll limits. */
.board-viewport{position:relative;overflow:hidden;touch-action:none;background-image:radial-gradient(#71807128 .7px,transparent .7px);background-size:18px 18px}
.spread-grid{position:absolute;left:0;top:0;min-width:0;transform-origin:0 0;will-change:transform;--scale:1}
.board-viewport.zoom-ready,.board-viewport.zoom-ready svg{cursor:ew-resize!important}
.board-viewport.rotate-ready,.board-viewport.rotate-ready svg{cursor:alias!important}
.board-viewport.reorder-ready svg{cursor:grab!important}
.board-viewport.reordering,.board-viewport.reordering svg{cursor:grabbing!important}
.page-card.drag-source{opacity:.35}.page-card.drop-before:before,.page-card.drop-after:after{content:'';position:absolute;top:-6px;bottom:24px;width:4px;background:#b5e8a8;box-shadow:0 0 9px #99de9466;z-index:2;pointer-events:none}.page-card.drop-before:before{right:-5px}.page-card.drop-after:after{left:-5px}
.page-drag-preview{position:absolute;pointer-events:none;z-index:5;background:#d5e4cd;color:#2f4b36;border:1px solid #a2c89b;border-radius:7px;padding:10px 14px;box-shadow:0 5px 18px #0005;font-size:11px}.page-drag-preview small{display:block;margin-top:4px;font-size:9px}
.zoom-controls{gap:2px}.zoom-controls input{width:85px}.zoom-controls button{font-size:10px}.zoom-controls #rotation-reset{border-left:1px solid #566052;margin-left:6px;border-radius:0}.page-management:after{content:'⌘ + ドラッグで任意の位置へ移動';display:block;color:#858d86;font-size:9px;margin-top:10px}
@media(max-width:850px){.zoom-controls input{width:45px}footer>span{max-width:130px}.zoom-controls #center-page{padding:4px}}

/* Zoom changes layout size, so text/UI are repainted at display resolution. */
.spread-grid{will-change:auto;padding:calc(24px * var(--scale)) calc(28px * var(--scale)) calc(40px * var(--scale))}
.page-surface{position:relative;width:100%;background:white;overflow:hidden;touch-action:none}
.page-surface>svg,.page-surface>.raster-image,.page-surface>.raster-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.page-surface>svg{z-index:1}.raster-image,.raster-canvas{pointer-events:none;image-rendering:auto}
.page-surface>.raster-image[hidden]{display:none}
.page-number{font-size:11px;line-height:16px;padding:8px 0 2px}

.board-viewport{overflow:clip}
.page-number{height:calc(26px * var(--scale));padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.page-sheet{padding:0}
.page-surface.text-floating,.page-surface.text-floating>svg{overflow:visible;z-index:3}
.text-floating .text-object{pointer-events:none}
.text-drop-target .page-sheet{outline:3px solid #d5e4cd;outline-offset:4px}
.text-resize-handle[data-resize=nw],.text-resize-handle[data-resize=se]{cursor:nwse-resize}
.text-resize-handle[data-resize=ne],.text-resize-handle[data-resize=sw]{cursor:nesw-resize}
.selection-outline{vector-effect:non-scaling-stroke}

.page-sheet svg[data-tool=rotate],.board-viewport.rotate-ready svg{cursor:alias}

.spread{gap:0}

.spread .page-sheet{box-shadow:none}

.frame-spacing-label{display:flex;align-items:center;gap:8px}.frame-spacing-label select{font:inherit;color:#d7e4d3;background:#353936;border:1px solid #667066;border-radius:4px;padding:4px 8px}

.page-management .frame-spacing-label{margin-top:14px;font-size:10px;justify-content:space-between}.page-management .frame-spacing-label select{background:white;color:var(--ink);border-color:var(--border)}

.board-heading{justify-content:flex-end}

.inline-text-editor{overflow:visible}
.canvas-text-input{width:100%;height:100%;resize:none;border:1px solid #7d9c76;border-radius:0;padding:0;background:#fffffff2;color:#28332e;font-family:"Noto Sans JP",sans-serif;text-orientation:mixed;outline:none;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;touch-action:auto}
@media print{.inline-text-editor{display:none}}

.text-list button{flex:0 0 auto;min-height:30px;line-height:16px}

.text-list{max-height:none;overflow:visible}
.text-list-editor{flex:0 0 auto;min-height:34px;padding:6px 8px;font-size:10px;line-height:1.8;resize:none;overflow:hidden;background:#edf4e8;border-color:#789974}

.page-management:first-child{padding-top:0}
.page-management .inspector-title{margin-top:14px;padding-bottom:0;border-bottom:0;font-size:11px;font-weight:400}

.page-sheet svg[data-tool=box],.page-sheet svg[data-tool=lasso],.page-sheet svg[data-tool=polygon]{cursor:crosshair}
@media print{.range-outline{display:none}}

@media print{.range-controls{display:none}}

#layer-list{display:flex;flex-direction:column;gap:5px;margin-top:12px}.layer-row{display:flex;align-items:center;gap:8px;padding:3px;border:1px solid transparent;border-radius:5px}.layer-row.active{border-color:#789974;background:#edf4e8}.layer-row button{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 8px;font-size:11px}.layer-row input{accent-color:#326b50}.live-layer-canvas{pointer-events:none}

.sidebar-add-page{width:100%;margin-top:14px;font-size:11px}.board>.toolbar{margin-top:24px}

.pen-colors{display:flex;gap:8px;align-items:center;padding:4px 8px}.toolbar .pen-color{width:22px;height:22px;padding:0;border:2px solid #ffffff55;border-radius:50%;background:var(--swatch)}.toolbar .pen-color:hover{background:var(--swatch);border-color:white}.toolbar .pen-color[aria-pressed=true]{outline:2px solid #d5e4cd;outline-offset:3px}

.pen-settings{display:flex;gap:12px 24px;flex-wrap:wrap;margin:12px 28px 0;padding:10px 12px;background:#353936;border:1px solid #505650;border-radius:8px;color:#d1dacf}.pen-setting{display:flex;align-items:center;gap:8px;font-size:11px}.pen-setting label{display:flex;align-items:center;gap:5px;white-space:nowrap}.pen-setting output{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}.pen-setting input[type=range]{width:100px;accent-color:#a8c1a1}.pen-setting input[type=checkbox]{accent-color:#a8c1a1}.pen-setting button{font-size:10px;padding:4px 8px;background:#d5e4cd;color:#2f4b36}.pen-setting>label:first-child{min-width:86px}
#pressure-curve-dialog{width:min(380px,calc(100vw - 32px));padding:20px;border:1px solid #acb9a5;border-radius:12px;background:#fbfcf8;color:#28332e;box-shadow:0 12px 50px #0005}#pressure-curve-dialog::backdrop{background:#0006}.curve-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.curve-heading h2{font-size:16px;margin:0}.curve-heading button{font-size:11px;padding:6px 10px}#pressure-curve-dialog p{font-size:11px;line-height:1.7}#pressure-curve-graph{display:block;width:100%;background:white;border:1px solid #e1e4dc;border-radius:8px;touch-action:none;user-select:none}#pressure-curve-graph text{font:11px sans-serif;fill:#687269}#pressure-curve-handle{cursor:grab}.curve-coordinates{display:flex;flex-direction:column;gap:8px;margin:12px 0}.curve-coordinates label{display:flex;align-items:center;gap:10px;font-size:11px}.curve-coordinates input{flex:1;accent-color:#326b50}.curve-status{margin-bottom:0;color:#687269}@media(max-width:600px){.pen-settings{margin:8px 12px 0;gap:10px;padding:8px}.pen-setting{gap:5px}.pen-setting input[type=range]{width:65px}}

.pressure-curve-handle{cursor:grab}.pressure-curve-handle:focus{outline:none;stroke:#1b472b;stroke-width:4}#pressure-curve-graph{cursor:crosshair}

.pen-presets{width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px}.pen-presets select{min-width:170px;max-width:250px;padding:5px 8px;border:1px solid #667066;border-radius:5px;background:#fbfcf8;color:#28332e}.pen-presets button{font-size:10px;padding:5px 8px}#pen-preset-dialog{width:min(380px,calc(100vw - 32px));border:1px solid #acb9a5;border-radius:12px;padding:22px;background:#fbfcf8;color:#28332e}#pen-preset-dialog::backdrop{background:#0006}#pen-preset-dialog h2{font-size:16px;margin:0 0 18px}#pen-preset-name{display:block;width:100%;margin-top:8px;padding:9px;border:1px solid #a7b29f;border-radius:5px}#pen-preset-dialog p{font-size:11px;line-height:1.8}.preset-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

.toolbar .delete-tool{display:flex;align-items:center;gap:6px}.delete-tool span{font-size:10px}

/* Independent tool groups and bottom view controls. */
.toolbars{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px 28px 0}
.toolbars>.toolbar{margin:0;flex-wrap:nowrap;justify-content:flex-start;min-height:44px;box-sizing:border-box}
.toolbars>.pen-colors{padding:10px 14px;gap:12px}
.toolbars>.history{margin-left:auto}
.view-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}
.view-tools{padding-right:10px;border-right:1px solid #566052}
.view-tools button{border:0;background:transparent;color:#d1dacf;padding:5px 7px;font-size:15px}
.view-tools button:hover{background:#414b42}
.view-tools button.active{background:#d5e4cd;color:#2f4b36}
.view-tools .tool span{font-size:10px;display:inline}
@media(max-width:1150px){.toolbars{margin-left:20px;margin-right:20px;gap:8px}}
@media(max-width:850px){.view-controls{gap:6px}.view-tools{padding-right:6px}.view-tools .tool span{display:none}footer>span{min-width:0;flex:1}}
@media(max-width:600px){.toolbars{margin:14px 12px 0;gap:6px}.toolbars>.toolbar{min-height:38px}.toolbars>.pen-colors{padding:8px 12px}.toolbars>.history{margin-left:0}footer{flex-wrap:wrap}.view-controls{margin-left:auto}}
.toolbars .tool{gap:4px}.toolbars .tool span{font-size:9px}.toolbars .toolbar button{padding:7px 6px}.toolbars>.toolbar{padding:5px}.toolbars>.pen-colors{padding:10px;gap:9px}.toolbars .pen-color{padding:0;width:20px;height:20px}

.pen-tilt-setting{display:flex;align-items:center;gap:5px;color:#c0cac2;font-size:10px;white-space:nowrap}.pen-tilt-setting input{accent-color:#a8c1a1}

.pen-tilt-setting>label:first-child{min-width:0}#tilt-curve-limits{display:flex;flex-direction:column;gap:12px;margin:14px 0;padding-top:12px;border-top:1px solid #e1e4dc}#tilt-curve-limits .pen-setting{color:#28332e;justify-content:space-between}#tilt-curve-limits input[type=range]{flex:1;min-width:70px}#pressure-curve-dialog{max-height:calc(100dvh - 32px);overflow:auto}