/* ============================================================
   Yomu — design tokens
   Identity: editorial "ink on warm paper". Body in a reading
   serif, UI in system sans, code in mono. One accent: pine green.
   ============================================================ */
:root{
  --yomu-bg:#ECEAE2; --yomu-surface:#FBFAF6; --yomu-surface-2:#F1EFE8; --yomu-surface-3:#E9E6DD;
  --yomu-ink:#22201B; --yomu-ink-2:#5B574E; --yomu-ink-3:#928D81;
  --yomu-rule:#E0DCD2; --yomu-rule-2:#ECE9E1;
  --yomu-accent:#1F6E58; --yomu-accent-2:#185847; --yomu-accent-tint:#E3EFE9; --yomu-on-accent:#FBFAF6;
  --yomu-sel:#CFE7DC; --yomu-danger:#B4453B;
  --yomu-c-comment:#9A9488; --yomu-c-key:#9A3F49; --yomu-c-str:#2C6E54; --yomu-c-num:#9A5A1E;
  --yomu-c-fn:#2A5DA6; --yomu-c-builtin:#6B4FA0; --yomu-c-attr:#7A6A1E; --yomu-c-punc:#5C584F;
  --yomu-shadow:0 1px 2px rgba(33,31,26,.05),0 10px 28px rgba(33,31,26,.07);
  --yomu-shadow-lg:0 8px 18px rgba(33,31,26,.10),0 30px 60px rgba(33,31,26,.16);
  --yomu-r-sm:7px; --yomu-r-md:10px; --yomu-r-lg:14px;
  --yomu-sans:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  --yomu-serif:"Iowan Old Style","Palatino Linotype","Palatino","Book Antiqua","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",Georgia,serif;
  --yomu-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Roboto Mono","Noto Sans Mono CJK JP","Source Han Mono",monospace;
}
:root[data-yomu-theme="dark"]{
  --yomu-bg:#15171A; --yomu-surface:#1B1E22; --yomu-surface-2:#23272C; --yomu-surface-3:#2A2F35;
  --yomu-ink:#E7E3DA; --yomu-ink-2:#A7A299; --yomu-ink-3:#736E64;
  --yomu-rule:#2C3137; --yomu-rule-2:#23272C;
  --yomu-accent:#5FBE9F; --yomu-accent-2:#7CCBB0; --yomu-accent-tint:#1E2E29; --yomu-on-accent:#10221C;
  --yomu-sel:#22413A; --yomu-danger:#E0857C;
  --yomu-c-comment:#6E6960; --yomu-c-key:#E89098; --yomu-c-str:#85CFAE; --yomu-c-num:#D8B27A;
  --yomu-c-fn:#88B6F0; --yomu-c-builtin:#B79FE0; --yomu-c-attr:#D9C98A; --yomu-c-punc:#A7A299;
  --yomu-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  --yomu-shadow-lg:0 12px 28px rgba(0,0,0,.45),0 40px 70px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
/* oka: html,body への指定は外した（埋め込み先のページを壊すため） */
.app{background:var(--yomu-bg);color:var(--yomu-ink);font-family:var(--yomu-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.app ::selection{background:var(--yomu-sel)}
:focus-visible{outline:2px solid var(--yomu-accent);outline-offset:2px;border-radius:6px}
button{font-family:inherit}

.preview::-webkit-scrollbar,.editor::-webkit-scrollbar,.toc::-webkit-scrollbar,.sheet-body::-webkit-scrollbar{width:11px;height:11px}
.preview::-webkit-scrollbar-thumb,.editor::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb,.sheet-body::-webkit-scrollbar-thumb{
  background:var(--yomu-rule);border:3px solid transparent;background-clip:content-box;border-radius:99px}
.preview::-webkit-scrollbar-thumb:hover,.editor::-webkit-scrollbar-thumb:hover{background:var(--yomu-ink-3)}

/* ============ app shell ============ */
.app{display:flex;flex-direction:column;height:100dvh}

/* topbar */
.topbar{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;flex:0 0 auto;
  background:var(--yomu-surface);border-bottom:1px solid var(--yomu-rule);z-index:30}
.brand{display:flex;align-items:center;gap:10px;user-select:none}
.mark{flex:0 0 auto;display:block;width:28px;height:28px}
.wordmark{font-weight:600;font-size:17px;letter-spacing:.01em;color:var(--yomu-ink);white-space:nowrap}
.wordmark .dot{color:var(--yomu-accent)}
.tagline{font-size:11.5px;color:var(--yomu-ink-3);white-space:nowrap;margin-left:2px;letter-spacing:.02em}
.spacer{flex:1 1 auto}

.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--yomu-r-sm);
  border:1px solid var(--yomu-rule);background:var(--yomu-surface);color:var(--yomu-ink-2);font-size:13px;font-weight:500;
  cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .05s}
.btn:hover{background:var(--yomu-surface-2);border-color:var(--yomu-ink-3);color:var(--yomu-ink)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--yomu-accent);border-color:var(--yomu-accent);color:var(--yomu-on-accent)}
.btn.primary:hover{background:var(--yomu-accent-2);border-color:var(--yomu-accent-2);color:var(--yomu-on-accent)}
.btn svg{width:16px;height:16px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--yomu-r-sm);
  border:1px solid transparent;background:transparent;color:var(--yomu-ink-2);cursor:pointer;transition:background .15s,color .15s}
.icon-btn:hover{background:var(--yomu-surface-2);color:var(--yomu-ink)}
.icon-btn svg{width:18px;height:18px}

/* segmented control */
.seg{display:inline-flex;background:var(--yomu-surface-2);border:1px solid var(--yomu-rule);border-radius:var(--yomu-r-sm);padding:3px}
.seg-btn{appearance:none;border:0;background:transparent;color:var(--yomu-ink-2);font-size:12.5px;font-weight:500;
  padding:5px 12px;border-radius:5px;cursor:pointer;transition:background .15s,color .15s}
.seg-btn:hover{color:var(--yomu-ink)}
.seg-btn.active{background:var(--yomu-surface);color:var(--yomu-ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* size control */
.size-ctl{display:inline-flex;border:1px solid var(--yomu-rule);border-radius:var(--yomu-r-sm);overflow:hidden}
.size-ctl button{appearance:none;border:0;background:var(--yomu-surface);color:var(--yomu-ink-2);font-size:13px;font-weight:600;
  padding:0 10px;height:34px;cursor:pointer;transition:background .15s,color .15s}
.size-ctl button:first-child{border-right:1px solid var(--yomu-rule)}
.size-ctl button:hover{background:var(--yomu-surface-2);color:var(--yomu-ink)}

/* theme icon swap */
.theme-moon{display:none}
:root[data-yomu-theme="dark"] .theme-sun{display:none}
:root[data-yomu-theme="dark"] .theme-moon{display:block}

/* menu */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--yomu-surface);
  border:1px solid var(--yomu-rule);border-radius:var(--yomu-r-md);box-shadow:var(--yomu-shadow-lg);padding:6px;display:none;z-index:40}
.menu-wrap.open .menu{display:block}
.menu li{list-style:none}
.menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:transparent;color:var(--yomu-ink);
  font-size:13px;padding:9px 10px;border-radius:6px;cursor:pointer}
.menu button:hover{background:var(--yomu-surface-2)}
.menu button svg{width:16px;height:16px;color:var(--yomu-ink-3);flex:0 0 auto}
.menu .sep{height:1px;background:var(--yomu-rule);margin:5px 4px}

/* ============ main 3-pane ============ */
.main{flex:1 1 auto;display:flex;min-height:0;background:var(--yomu-bg);position:relative}
.editor-pane,.preview-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--yomu-surface)}
.editor-pane{flex:1 1 0;min-width:300px;border-right:1px solid var(--yomu-rule)}
.preview-pane{flex:1.45 1 0;min-width:340px}
.toc-pane{flex:0 0 252px;display:flex;flex-direction:column;min-height:0;background:var(--yomu-surface);border-left:1px solid var(--yomu-rule)}

.pane-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:40px;padding:0 12px 0 16px;border-bottom:1px solid var(--yomu-rule-2);background:var(--yomu-surface)}
.pane-head .label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--yomu-ink-3)}
.pane-actions{display:flex;align-items:center;gap:4px}
.text-btn{appearance:none;border:0;background:transparent;color:var(--yomu-ink-3);font-size:12px;font-weight:500;
  padding:5px 8px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s}
.text-btn:hover{background:var(--yomu-surface-2);color:var(--yomu-ink)}
.text-btn.danger:hover{color:var(--yomu-danger)}

/* formatting toolbar */
.toolbar{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:6px 10px;flex-wrap:wrap;
  border-bottom:1px solid var(--yomu-rule-2);background:var(--yomu-surface)}
.tool{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 6px;
  border:0;border-radius:6px;background:transparent;color:var(--yomu-ink-2);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .15s,color .15s}
.tool:hover{background:var(--yomu-surface-2);color:var(--yomu-ink)}
.tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool .fillc{fill:currentColor;stroke:none}
.tool.it{font-style:italic;font-family:var(--yomu-serif)}
.tool.st{text-decoration:line-through}
.tool-sep{width:1px;height:18px;background:var(--yomu-rule);margin:0 5px}

/* editor */
.editor{flex:1 1 auto;width:100%;min-height:0;resize:none;border:0;outline:0;background:var(--yomu-surface);color:var(--yomu-ink);
  font-family:var(--yomu-mono);font-size:14.5px;line-height:1.75;padding:22px 26px 40vh;tab-size:2;
  caret-color:var(--yomu-accent)}
.editor::placeholder{color:var(--yomu-ink-3)}

/* progress */
.progress{flex:0 0 auto;height:3px;background:transparent;overflow:hidden}
.progress .bar{display:block;height:100%;width:100%;background:var(--yomu-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .08s linear}

/* preview */
.preview{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}

/* table of contents */
.toc{flex:1 1 auto;min-height:0;overflow-y:auto;padding:14px 12px 28px}
.toc ul{list-style:none;margin:0;padding:0}
.toc-item a{display:block;position:relative;color:var(--yomu-ink-2);text-decoration:none;font-size:12.5px;line-height:1.45;
  padding:6px 10px 6px 16px;border-left:2px solid transparent;border-radius:0 6px 6px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s,border-color .12s}
.toc-item a:hover{color:var(--yomu-ink);background:var(--yomu-surface-2)}
.toc-item a.active{color:var(--yomu-accent);border-left-color:var(--yomu-accent);background:var(--yomu-accent-tint);font-weight:600}
.toc-item.lvl-0 a{padding-left:16px}
.toc-item.lvl-1 a{padding-left:28px}
.toc-item.lvl-2 a{padding-left:40px;font-size:12px}
.toc-item.lvl-3 a{padding-left:52px;font-size:12px;color:var(--yomu-ink-3)}
.toc-item.lvl-4 a,.toc-item.lvl-5 a{padding-left:62px;font-size:11.5px;color:var(--yomu-ink-3)}
.toc-empty{color:var(--yomu-ink-3);font-size:12px;line-height:1.7;padding:10px 14px}

/* status bar */
.statusbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;height:34px;padding:0 16px;
  background:var(--yomu-surface);border-top:1px solid var(--yomu-rule);font-size:12px;color:var(--yomu-ink-3)}
.statusbar .stat b{color:var(--yomu-ink-2);font-weight:600}
.statusbar .file{color:var(--yomu-ink-2);font-weight:600;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statusbar .dot{opacity:.5}
.statusbar .hint{display:inline-flex;align-items:center;gap:6px}
.statusbar .hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--yomu-accent);opacity:.7}

/* ============ prose (.md-body) ============ */
.md-body{--yomu-prose-size:18px;max-width:760px;margin:0 auto;padding:64px 40px 40vh;
  font-family:var(--yomu-serif);font-size:var(--yomu-prose-size);line-height:1.85;color:var(--yomu-ink);
  font-feature-settings:"palt" 1;word-wrap:break-word}
.md-body > :first-child{margin-top:0}
.md-body h1,.md-body h2,.md-body h3,.md-body h4,.md-body h5,.md-body h6{
  font-family:var(--yomu-sans);line-height:1.35;font-weight:700;color:var(--yomu-ink);scroll-margin-top:20px}
.md-body h1{font-size:2.05em;margin:1.6em 0 .55em;letter-spacing:-.01em}
.md-body h2{font-size:1.5em;margin:1.9em 0 .7em;padding-bottom:.3em;border-bottom:1px solid var(--yomu-rule)}
.md-body h3{font-size:1.26em;margin:1.7em 0 .5em}
.md-body h4{font-size:1.08em;margin:1.5em 0 .4em}
.md-body h5{font-size:.96em;margin:1.4em 0 .4em;color:var(--yomu-ink-2)}
.md-body h6{font-size:.84em;margin:1.4em 0 .4em;color:var(--yomu-ink-3);text-transform:uppercase;letter-spacing:.08em}
.md-body p{margin:1.15em 0}
.md-body a{color:var(--yomu-accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--yomu-accent) 35%,transparent)}
.md-body a:hover{border-bottom-color:var(--yomu-accent)}
.md-body strong{font-weight:700;color:var(--yomu-ink)}
.md-body em{font-style:italic}
.md-body del{color:var(--yomu-ink-3)}
.md-body ul,.md-body ol{padding-left:1.5em;margin:1.1em 0}
.md-body li{margin:.4em 0}
.md-body li::marker{color:var(--yomu-ink-3)}
.md-body ul.contains-task-list,.md-body .contains-task-list ul{list-style:none;padding-left:1.2em}
.md-body li.task-list-item{position:relative;padding-left:1.9em;list-style:none}
.md-body li.task-list-item input{position:absolute;left:0;top:.32em;appearance:none;width:1.15em;height:1.15em;
  border:1.5px solid var(--yomu-ink-3);border-radius:5px;background:var(--yomu-surface);cursor:default}
.md-body li.task-list-item input:checked{background:var(--yomu-accent);border-color:var(--yomu-accent)}
.md-body li.task-list-item input:checked::after{content:"";position:absolute;left:.34em;top:.12em;width:.32em;height:.6em;
  border:solid var(--yomu-on-accent);border-width:0 .16em .16em 0;transform:rotate(45deg)}
.md-body blockquote{margin:1.5em 0;padding:.2em 0 .2em 1.2em;border-left:3px solid var(--yomu-accent);color:var(--yomu-ink-2);font-style:italic}
.md-body blockquote p{margin:.5em 0}
.md-body hr{border:0;border-top:1px solid var(--yomu-rule);margin:2.6em 0}
.md-body img{max-width:100%;height:auto;border-radius:var(--yomu-r-md);display:block;margin:1.5em auto;box-shadow:var(--yomu-shadow)}
.md-body code{font-family:var(--yomu-mono);font-size:.86em;background:var(--yomu-accent-tint);color:var(--yomu-accent-2);
  padding:.14em .42em;border-radius:5px;word-break:break-word}
:root[data-yomu-theme="dark"] .md-body code{color:var(--yomu-accent);background:var(--yomu-accent-tint)}
.md-body .code-card{margin:1.6em 0;border:1px solid var(--yomu-rule);border-radius:var(--yomu-r-md);overflow:hidden;background:var(--yomu-surface-2)}
.md-body .code-head{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;
  background:var(--yomu-surface-3);border-bottom:1px solid var(--yomu-rule)}
.md-body .code-lang{font-family:var(--yomu-sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--yomu-ink-3)}
.md-body .code-copy{appearance:none;border:0;background:transparent;color:var(--yomu-ink-3);font-family:var(--yomu-sans);
  font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:5px;cursor:pointer;transition:background .15s,color .15s}
.md-body .code-copy:hover{background:var(--yomu-surface);color:var(--yomu-ink)}
.md-body pre{margin:0;padding:14px 16px;overflow-x:auto;background:transparent}
.md-body pre code{background:none;padding:0;font-size:.84em;line-height:1.7;color:var(--yomu-ink);white-space:pre}
.md-body .table-wrap{overflow-x:auto;margin:1.6em 0;border:1px solid var(--yomu-rule);border-radius:var(--yomu-r-md)}
.md-body table{border-collapse:collapse;width:100%;font-family:var(--yomu-sans);font-size:.9em}
.md-body th,.md-body td{padding:.62em .9em;border-bottom:1px solid var(--yomu-rule);text-align:left}
.md-body thead th{background:var(--yomu-surface-2);font-weight:600;color:var(--yomu-ink);border-bottom:1.5px solid var(--yomu-rule)}
.md-body tbody tr:last-child td{border-bottom:0}
.md-body tbody tr:nth-child(even){background:var(--yomu-rule-2)}
.md-body td[align=center],.md-body th[align=center]{text-align:center}
.md-body td[align=right],.md-body th[align=right]{text-align:right}
.md-placeholder{margin:16vh auto 0;max-width:36ch;color:var(--yomu-ink-3);font-family:var(--yomu-sans);font-size:14px;line-height:1.95;text-align:center}

/* highlight.js token mapping */
.md-body .hljs{color:var(--yomu-ink)}
.md-body .hljs-comment,.md-body .hljs-quote{color:var(--yomu-c-comment);font-style:italic}
.md-body .hljs-keyword,.md-body .hljs-selector-tag,.md-body .hljs-literal,.md-body .hljs-section,.md-body .hljs-name{color:var(--yomu-c-key)}
.md-body .hljs-string,.md-body .hljs-regexp,.md-body .hljs-addition,.md-body .hljs-meta .hljs-string{color:var(--yomu-c-str)}
.md-body .hljs-number,.md-body .hljs-symbol,.md-body .hljs-bullet,.md-body .hljs-link{color:var(--yomu-c-num)}
.md-body .hljs-title,.md-body .hljs-title.function_,.md-body .hljs-doctag{color:var(--yomu-c-fn)}
.md-body .hljs-built_in,.md-body .hljs-class .hljs-title,.md-body .hljs-type,.md-body .hljs-tag{color:var(--yomu-c-builtin)}
.md-body .hljs-attr,.md-body .hljs-attribute,.md-body .hljs-variable,.md-body .hljs-template-variable,.md-body .hljs-property,.md-body .hljs-selector-attr,.md-body .hljs-selector-class,.md-body .hljs-selector-id{color:var(--yomu-c-attr)}
.md-body .hljs-punctuation,.md-body .hljs-operator{color:var(--yomu-c-punc)}
.md-body .hljs-meta{color:var(--yomu-ink-3)}
.md-body .hljs-emphasis{font-style:italic}
.md-body .hljs-strong{font-weight:700}
.md-body .hljs-deletion{color:var(--yomu-c-key)}

/* ============ drop overlay ============ */
.drop-overlay{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--yomu-bg) 78%,transparent);backdrop-filter:blur(3px)}
.drop-overlay.show{display:flex}
.drop-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 64px;
  border:2px dashed var(--yomu-accent);border-radius:var(--yomu-r-lg);background:var(--yomu-surface);box-shadow:var(--yomu-shadow-lg)}
.drop-card svg{width:40px;height:40px;color:var(--yomu-accent)}
.drop-card p{margin:0;font-weight:600;font-size:16px;color:var(--yomu-ink)}
.drop-card span{font-size:12px;color:var(--yomu-ink-3);letter-spacing:.06em}

/* toast */
.toast{position:fixed;left:50%;bottom:54px;transform:translate(-50%,12px);z-index:90;
  background:var(--yomu-ink);color:var(--yomu-surface);font-size:13px;font-weight:500;padding:10px 18px;
  border-radius:99px;box-shadow:var(--yomu-shadow-lg);opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.toast.show{opacity:1;transform:translate(-50%,0)}
:root[data-yomu-theme="dark"] .toast{background:#e9e6de;color:#1a1c1f}

/* scrim */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .2s}
.app.toc-open .scrim{opacity:1;pointer-events:auto}

/* ============ help sheet (modal) ============ */
.sheet-overlay{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb,var(--yomu-bg) 55%,rgba(0,0,0,.45));backdrop-filter:blur(4px)}
.sheet-overlay.show{display:flex}
.sheet{width:min(640px,100%);max-height:min(80vh,720px);display:flex;flex-direction:column;
  background:var(--yomu-surface);border:1px solid var(--yomu-rule);border-radius:var(--yomu-r-lg);box-shadow:var(--yomu-shadow-lg);overflow:hidden}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--yomu-rule)}
.sheet-head h2{margin:0;font-size:15px;font-weight:600;color:var(--yomu-ink)}
.sheet-body{overflow-y:auto;padding:18px 20px 22px}
.sheet h3{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--yomu-ink-3);
  margin:18px 0 10px}
.sheet h3:first-child{margin-top:0}
.kbd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--yomu-rule-2);font-size:13.5px;color:var(--yomu-ink)}
.kbd-row:last-child{border-bottom:0}
kbd{font-family:var(--yomu-mono);font-size:11.5px;background:var(--yomu-surface-2);border:1px solid var(--yomu-rule);
  border-bottom-width:2px;border-radius:5px;padding:2px 7px;color:var(--yomu-ink-2);white-space:nowrap}
.cheat{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
.cheat .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--yomu-rule-2);font-size:13px}
.cheat .row span{color:var(--yomu-ink-2)}
.cheat .row code{font-family:var(--yomu-mono);font-size:12px;background:var(--yomu-surface-2);padding:2px 6px;border-radius:4px;color:var(--yomu-ink)}
.sheet-foot{font-size:11.5px;color:var(--yomu-ink-3);text-align:center;padding:12px 18px;border-top:1px solid var(--yomu-rule)}

/* export sheet rows */
.exp-sub{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--yomu-ink-3);margin:18px 0 8px}
.exp-sub:first-child{margin-top:0}
.exp-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--yomu-r-md);transition:background .12s}
.exp-row:hover{background:var(--yomu-surface-2)}
.exp-ico{flex:0 0 auto;min-width:34px;height:30px;padding:0 6px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  background:var(--yomu-accent-tint);color:var(--yomu-accent);font-size:11px;font-weight:700;letter-spacing:.01em}
.exp-main{flex:1 1 auto;min-width:0}
.exp-name{font-size:13.5px;font-weight:600;color:var(--yomu-ink)}
.exp-desc{font-size:11.5px;color:var(--yomu-ink-3);line-height:1.5;margin-top:1px}
.exp-act{flex:0 0 auto;display:flex;gap:6px}
.exp-btn{appearance:none;border:1px solid var(--yomu-rule);background:var(--yomu-surface);color:var(--yomu-ink-2);font-size:12px;font-weight:600;
  padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.exp-btn:hover{background:var(--yomu-accent);border-color:var(--yomu-accent);color:var(--yomu-on-accent)}
.exp-btn.ghost{padding:6px 9px}
@media (max-width:560px){ .exp-desc{display:none} .exp-row{gap:10px;padding:9px 8px} }

/* onboarding: welcome + guided tour */
.tour-overlay{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.tour-overlay.show{display:flex}
.welcome-bg{position:absolute;inset:0;background:rgba(33,31,26,.5)}
:root[data-yomu-theme="dark"] .welcome-bg{background:rgba(0,0,0,.62)}
.welcome-card{position:relative;background:var(--yomu-surface);border:1px solid var(--yomu-rule);border-radius:var(--yomu-r-lg);
  max-width:440px;width:100%;padding:30px 28px;box-shadow:var(--yomu-shadow-lg);text-align:center;animation:welcomeIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes welcomeIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.welcome-mark{width:54px;height:54px;border-radius:15px;background:var(--yomu-accent);color:var(--yomu-on-accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--yomu-serif);font-size:27px;font-weight:600;margin:0 auto 16px}
.welcome-card h2{font-family:var(--yomu-serif);font-size:23px;font-weight:600;color:var(--yomu-ink);margin:0 0 9px}
.welcome-card .lead{font-size:13.5px;color:var(--yomu-ink-2);line-height:1.7;margin:0 0 20px}
.welcome-feats{display:flex;flex-direction:column;gap:10px;text-align:left;margin:0 auto 24px;max-width:330px}
.welcome-feat{display:flex;align-items:center;gap:11px;font-size:13px;color:var(--yomu-ink-2);line-height:1.4}
.welcome-feat svg{width:19px;height:19px;color:var(--yomu-accent);flex:0 0 auto}
.welcome-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.welcome-acts button{appearance:none;cursor:pointer;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:9px;
  border:1px solid var(--yomu-rule);background:var(--yomu-surface);color:var(--yomu-ink-2);transition:background .15s,border-color .15s,filter .15s}
.welcome-acts button:hover{background:var(--yomu-surface-2)}
.welcome-acts button.primary{background:var(--yomu-accent);border-color:var(--yomu-accent);color:var(--yomu-on-accent)}
.welcome-acts button.primary:hover{filter:brightness(1.06)}

.tour-layer{position:fixed;inset:0;z-index:92;display:none}
.tour-layer.show{display:block}
.tour-spot{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(33,31,26,.55);
  border:2px solid var(--yomu-accent);transition:left .35s cubic-bezier(.2,.8,.2,1),top .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
:root[data-yomu-theme="dark"] .tour-spot{box-shadow:0 0 0 9999px rgba(0,0,0,.66)}
.tour-tip{position:absolute;width:300px;max-width:calc(100vw - 28px);background:var(--yomu-surface);border:1px solid var(--yomu-rule);
  border-radius:12px;box-shadow:var(--yomu-shadow-lg);padding:16px 16px 14px;transition:left .3s ease,top .3s ease}
.tour-step{font-size:10.5px;font-weight:700;letter-spacing:.09em;color:var(--yomu-accent);margin-bottom:6px}
.tour-tip h3{font-family:var(--yomu-serif);font-size:16px;font-weight:600;color:var(--yomu-ink);margin:0 0 6px}
.tour-tip p{font-size:12.5px;color:var(--yomu-ink-2);line-height:1.62;margin:0}
.tour-foot{display:flex;align-items:center;justify-content:space-between;margin-top:15px;gap:10px}
.tour-dots{display:flex;gap:5px}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--yomu-rule);transition:.2s}
.tour-dot.on{background:var(--yomu-accent);transform:scale(1.25)}
.tour-btns{display:flex;gap:7px;align-items:center}
.tour-btns button{appearance:none;cursor:pointer;font-size:12px;font-weight:600;padding:6px 12px;border-radius:7px;
  border:1px solid var(--yomu-rule);background:var(--yomu-surface);color:var(--yomu-ink-2);transition:background .15s,border-color .15s}
.tour-btns button:hover{background:var(--yomu-surface-2)}
.tour-btns button.primary{background:var(--yomu-accent);border-color:var(--yomu-accent);color:var(--yomu-on-accent)}
.tour-btns .ghost{border-color:transparent;color:var(--yomu-ink-3);padding:6px 8px}
@media (prefers-reduced-motion: reduce){ .tour-spot,.tour-tip,.welcome-card{transition:none;animation:none} }
@media (max-width:560px){ .tour-tip{width:calc(100vw - 28px)} }

/* mode visibility */
.app[data-mode="editor"] .preview-pane,
.app[data-mode="editor"] .toc-pane{display:none}
.app[data-mode="editor"] .editor-pane{border-right:0}
.app[data-mode="preview"] .editor-pane{display:none}
.app.no-toc .toc-pane{display:none}
@media (min-width:821px){
  .app[data-toc="hidden"] .toc-pane{display:none}
}
.app[data-mode="editor"] #tocToggle,
.app.no-toc #tocToggle{display:none}
.show-mobile{display:none}

/* ============ responsive ============ */
@media (max-width:980px){
  .preview-pane{flex:1.3 1 0}
  .toc-pane{flex:0 0 224px}
  .tagline{display:none}
}
@media (max-width:820px){
  .mode-split{display:none}
  .show-mobile{display:inline-flex}
  .tagline{display:none}
  .size-ctl{display:none}
  .editor-pane{min-width:0;border-right:0}
  .preview-pane{min-width:0}
  .md-body{padding:36px 22px 40vh}
  .app[data-mode="split"] .editor-pane{display:none}
  .toc-pane{position:fixed;top:56px;bottom:34px;right:0;width:min(82vw,300px);z-index:60;
    border-left:1px solid var(--yomu-rule);box-shadow:-12px 0 30px rgba(0,0,0,.18);
    transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);display:flex}
  .app.toc-open .toc-pane{transform:translateX(0)}
  .statusbar .hint,.statusbar .hint-dot{display:none}
  .statusbar .file{max-width:48vw}
}
@media (max-width:560px){
  .topbar{gap:8px;padding:0 10px}
  .wordmark{display:none}
  .btn span.btn-label{display:none}
  .btn{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* ============ print ============ */
@page{margin:18mm}
@media print{
  .topbar,.statusbar,.editor-pane,.toc-pane,.toolbar,.progress,.toast,.drop-overlay,.scrim,.sheet-overlay{display:none!important}
  body,.app,.main,.preview-pane,.preview{overflow:visible!important;height:auto!important;display:block!important;background:#fff}
  .preview{background:#fff}
  .md-body{max-width:none;margin:0;padding:0;color:#111}
  .md-body a{color:#111}
  .md-body .code-card{break-inside:avoid;border-color:#ccc}
  .code-copy{display:none!important}
  .md-body h2,.md-body h3,.md-body h4{break-after:avoid}
}
/* Yomu companion features — counter popover, find/replace, toast.
   All classes are namespaced .yx-* and reuse the editor's CSS custom
   properties so light/dark themes follow the host app automatically. */

/* ---- status bar additions ---- */
.yx-sel { color: var(--yomu-accent); }
.yx-sel b { color: var(--yomu-accent) !important; }

.yx-detailbtn {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--yomu-ink-3); padding: 2px 6px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px;
}
.yx-detailbtn:hover { color: var(--yomu-ink); background: var(--yomu-surface-2); }
.yx-detailbtn[aria-expanded="true"] { color: var(--yomu-accent); }

.yx-saved {
  color: var(--yomu-accent); font-weight: 600; opacity: 0;
  transition: opacity .2s; display: inline-flex; align-items: center; gap: 4px;
}
.yx-saved.show { opacity: 1; }

/* ---- detail popover ---- */
.yx-pop {
  position: fixed; bottom: 42px; left: 12px; z-index: 60;
  background: var(--yomu-surface); color: var(--yomu-ink);
  border: 1px solid var(--yomu-rule); border-radius: var(--yomu-r-md, 12px);
  box-shadow: var(--yomu-shadow-lg, 0 16px 40px rgba(0,0,0,.18));
  padding: 12px 14px; min-width: 232px;
  font-family: var(--yomu-sans, system-ui, sans-serif); font-size: 12.5px;
}
.yx-pop[hidden] { display: none; }
.yx-pop h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--yomu-ink-3); font-weight: 600; }
.yx-grid { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; }
.yx-grid .k { color: var(--yomu-ink-2); }
.yx-grid .v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
.yx-pop .yx-selblock {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--yomu-rule);
}
.yx-pop .yx-selblock .k { color: var(--yomu-accent); }
.yx-pop .yx-selblock .v { color: var(--yomu-accent); }
.yx-pop[hidden] .yx-selblock { display: none; }

/* ---- find / replace panel ---- */
.yx-find {
  position: fixed; top: 58px; right: 16px; z-index: 60;
  background: var(--yomu-surface); color: var(--yomu-ink);
  border: 1px solid var(--yomu-rule); border-radius: var(--yomu-r-md, 12px);
  box-shadow: var(--yomu-shadow-lg, 0 16px 40px rgba(0,0,0,.18));
  padding: 8px; width: 312px;
  font-family: var(--yomu-sans, system-ui, sans-serif);
  display: flex; flex-direction: column; gap: 6px;
}
.yx-find[hidden] { display: none; }
.yx-row { display: flex; align-items: center; gap: 5px; }
.yx-row input[type="text"] {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--yomu-rule); border-radius: 8px;
  background: var(--yomu-surface-2); color: var(--yomu-ink);
  padding: 6px 9px; font-size: 13px; outline: none;
  font-family: var(--yomu-sans, system-ui, sans-serif);
}
.yx-row input[type="text"]:focus { border-color: var(--yomu-accent); box-shadow: 0 0 0 2px var(--yomu-accent-tint, rgba(31,110,88,.18)); }
.yx-count { font-size: 11.5px; color: var(--yomu-ink-3); min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yx-ibtn {
  appearance: none; cursor: pointer; border: 1px solid transparent;
  background: var(--yomu-surface-2); color: var(--yomu-ink-2);
  width: 28px; height: 28px; border-radius: 7px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.yx-ibtn:hover { color: var(--yomu-ink); border-color: var(--yomu-rule); }
.yx-ibtn.on { background: var(--yomu-accent); color: var(--yomu-on-accent, #fff); border-color: var(--yomu-accent); }
.yx-tbtn {
  appearance: none; cursor: pointer; border: 1px solid var(--yomu-rule);
  background: var(--yomu-surface-2); color: var(--yomu-ink);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.yx-tbtn:hover { background: var(--yomu-surface-3, var(--yomu-surface-2)); }
.yx-tbtn.primary { background: var(--yomu-accent); border-color: var(--yomu-accent); color: var(--yomu-on-accent, #fff); }
.yx-replace-row[hidden] { display: none; }

/* ---- toast ---- */
.yx-toast {
  position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%) translateY(8px);
  background: var(--yomu-ink); color: var(--yomu-surface);
  padding: 9px 14px; border-radius: 999px; font-size: 12.5px;
  font-family: var(--yomu-sans, system-ui, sans-serif);
  box-shadow: var(--yomu-shadow-lg, 0 16px 40px rgba(0,0,0,.25));
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; max-width: 80vw;
}
.yx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.yx-toast button {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--yomu-accent-2, #6fdcc0); font-weight: 700; font-size: 12.5px; padding: 0;
}
.yx-toast button:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .yx-find { right: 8px; left: 8px; width: auto; }
  .yx-pop { left: 8px; right: 8px; min-width: 0; }
}
/* Yomu — サイト組み込み用のスタイル。
   エディター本体の CSS 変数をそのまま使うので、ライト／ダークに自動追従する。
   親サイトの色に寄せたい場合は、外側で以下を上書きすれば全体に効く:
     .app{ --yomu-accent:#○○; --yomu-r-md:10px; --yomu-sans:"○○"; } */

/* ---------- 埋め込み（親ページに直置き）モード ---------- */
.app[data-embed] {
  height: var(--yomu-height, min(86vh, 900px));
  position: relative;
  border: 1px solid var(--yomu-rule);
  border-radius: var(--yomu-radius, 14px);
  overflow: hidden;
  isolation: isolate;
}
/* 画面全体に出るはずのものを、ツールの内側に収める */
.app[data-embed] .drop-overlay,
.app[data-embed] .sheet-overlay,
.app[data-embed] .tour-overlay,
.app[data-embed] .tour-layer,
.app[data-embed] .scrim,
.app[data-embed] .toast,
.app[data-embed] .yx-pop,
.app[data-embed] .yx-find,
.app[data-embed] .yx-toast,
.app[data-embed] .yn-panel { position: absolute; }
.app[data-embed] .toast { bottom: 20px; }
.app[data-embed] .yx-find { top: 66px; }
.app[data-embed] .yx-pop { bottom: 46px; }
.app[data-embed] .yx-toast { bottom: 54px; }
@media (max-width: 820px) {
  .app[data-embed] .toc-pane { position: absolute; top: 56px; bottom: 34px; }
}

/* ---------- トップバーのサイトボタン ---------- */
.yn-sitebtn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px; margin-right: 2px;
  border: 1px solid var(--yomu-rule); border-radius: 9px;
  background: var(--yomu-surface-2); color: var(--yomu-ink-2);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  flex: 0 0 auto;
}
.yn-sitebtn:hover { color: var(--yomu-ink); border-color: var(--yomu-accent); }
.yn-sitebtn[aria-expanded="true"] { color: var(--yomu-accent); border-color: var(--yomu-accent); }
.yn-sitebtn-name { white-space: nowrap; }
@media (max-width: 720px) { .yn-sitebtn-name { display: none; } }

/* ---------- サイトメニュー ---------- */
.yn-panel { position: fixed; inset: 0; z-index: 95; }
.yn-panel[hidden] { display: none; }
.yn-scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .38);
  opacity: 0; transition: opacity .18s;
}
.yn-panel.show .yn-scrim { opacity: 1; }
.yn-sheet {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 1;
  width: min(88%, 320px);
  display: flex; flex-direction: column;
  background: var(--yomu-surface); color: var(--yomu-ink);
  border-right: 1px solid var(--yomu-rule);
  box-shadow: var(--yomu-shadow-lg, 0 16px 40px rgba(0,0,0,.2));
  transform: translateX(-100%); transition: transform .2s cubic-bezier(.2,.8,.3,1);
}
.yn-panel.show .yn-sheet { transform: translateX(0); }

.yn-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 16px 13px; border-bottom: 1px solid var(--yomu-rule);
}
.yn-brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yn-brand-name {
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  color: var(--yomu-ink); text-decoration: none;
}
a.yn-brand-name:hover { color: var(--yomu-accent); }
.yn-brand-tag { font-size: 11.5px; color: var(--yomu-ink-3); }
.yn-close {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--yomu-ink-3); width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.yn-close:hover { background: var(--yomu-surface-2); color: var(--yomu-ink); }

.yn-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 20px; }
.yn-links { display: flex; flex-direction: column; }
.yn-link {
  display: block; padding: 10px 10px; border-radius: 9px;
  color: var(--yomu-ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.yn-link:hover { background: var(--yomu-surface-2); color: var(--yomu-ink); }

.yn-sub {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yomu-ink-3); font-weight: 700;
  padding: 16px 10px 7px; margin-top: 6px; border-top: 1px solid var(--yomu-rule);
}
.yn-cards { display: flex; flex-direction: column; gap: 6px; }
.yn-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 11px; border: 1px solid var(--yomu-rule); border-radius: 10px;
  background: var(--yomu-surface-2); text-decoration: none;
}
.yn-card:hover { border-color: var(--yomu-accent); background: var(--yomu-surface); }
.yn-card-name { font-size: 13px; font-weight: 700; color: var(--yomu-ink); }
.yn-card-desc { font-size: 11.5px; line-height: 1.6; color: var(--yomu-ink-3); }

/* ---------- 関連ツールの帯 ---------- */
.yn-rail {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-top: 1px solid var(--yomu-rule); background: var(--yomu-surface-2);
  overflow: hidden;
}
.yn-rail-label {
  flex: 0 0 auto; font-size: 10.5px; letter-spacing: .08em;
  color: var(--yomu-ink-3); font-weight: 700;
}
.yn-rail-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.yn-rail-track::-webkit-scrollbar { display: none; }
.yn-chip {
  flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--yomu-rule); background: var(--yomu-surface);
  color: var(--yomu-ink-2); text-decoration: none; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.yn-chip:hover { color: var(--yomu-accent); border-color: var(--yomu-accent); }

/* ---------- 広告スロット ---------- */
.yn-ad {
  flex: 0 0 auto; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 16px; background: var(--yomu-surface-2);
}
.yn-ad-top { border-bottom: 1px solid var(--yomu-rule); }
.yn-ad-bottom { border-top: 1px solid var(--yomu-rule); }
.yn-ad-label {
  align-self: flex-start;
  font-size: 9.5px; letter-spacing: .12em; color: var(--yomu-ink-3);
  text-transform: uppercase; font-weight: 700;
}
.yn-ad-body { width: 100%; display: flex; justify-content: center; min-height: 0; }
.yn-ad-body :where(img, iframe, ins) { max-width: 100%; }

@media print {
  .yn-ad, .yn-rail, .yn-panel, .yn-sitebtn { display: none !important; }
}

/* ---------- ほかのツール（ツールバーのランチャー） ---------- */
.yn-launchbtn svg { opacity: .85; }
.yn-launchbtn[aria-expanded="true"] { color: var(--yomu-accent); background: var(--yomu-accent-tint); }

.yn-launch {
  position: fixed; top: 60px; right: 16px; z-index: 96;
  width: min(320px, calc(100vw - 24px));
  background: var(--yomu-surface); color: var(--yomu-ink);
  border: 1px solid var(--yomu-rule); border-radius: var(--yomu-r-lg, 14px);
  box-shadow: var(--yomu-shadow-lg, 0 16px 40px rgba(0,0,0,.18));
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.yn-launch[hidden] { display: none; }
.yn-launch-head {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yomu-ink-3); font-weight: 700; padding: 2px 2px 0;
}
.yn-launch-grid { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.yn-launch-all {
  align-self: flex-start; padding: 4px 2px;
  color: var(--yomu-accent); text-decoration: none; font-size: 12px; font-weight: 700;
}
.yn-launch-all:hover { text-decoration: underline; }

/* 書き出し画面に並べるとき */
.yn-explist { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 720px) {
  .yn-launch { right: 8px; left: 8px; width: auto; }
}

/* ============================================================
   ここから下は oka-project 側で足した層（import-yomu.mjs が生成）。
   Yomu本体のデザインには触らない。
   ============================================================ */

/* --- CSP代替（style-src 'self' のため、配布版のインラインstyleをクラス化） --- */
.tool[data-fmt="bold"] { font-weight: 800; }
.icon-btn[data-sq="28"] { width: 28px; height: 28px; }
.icon-btn[data-sq="30"] { width: 30px; height: 30px; }
.exp-btn[data-wide] { width: 100%; justify-content: center; margin-bottom: 16px; padding: 9px 12px; }
.sheet-p { margin: 0 0 10px; line-height: 1.8; }
.sheet-p.last { margin: 0; }
.yx-ico-mid { vertical-align: -2px; }
/* 配布版は style="display:none" だった要素。hidden属性へ移したので、
   JS が style.display='' で表示に戻す動作（配布版のまま）とも両立する */
.app [hidden] { display: none; }

/* --- ページへの載せ方（アプリ型・build.mjs の layout:"app"） ---
   長時間さわる道具を枠に押し込めると使い物にならない。**最初の画面は道具だけ**にして、
   説明（SEOの本体）はスクロールした先に置く。サイトのヘッダーも出さない代わりに、
   道具の下端のバーに oka-project の印字とツール一覧への導線を入れる（下の統合層）。 */
.app[data-embed] {
  --yomu-height: 100dvh;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
/* 道具の中のスクロールは、道具の中で止める（連鎖させない）。
   単体版は body 自体がスクロールしない作りだったので問題にならなかったが、
   埋め込み先ではページが下に続く。プレビューを読み切った勢いでそのまま
   説明欄まで飛ばされる（＝書いている場所を見失う）ため、端で止める。
   説明へ行きたいときは、下端バーの「使い方・よくある質問 ↓」か、
   ツールバー・下端バーの上でのスクロール（そこは道具の外＝ページが動く）。 */
.app[data-embed] #editor,
.app[data-embed] #preview,
.app[data-embed] .md-body,
.app[data-embed] .toc-pane,
.app[data-embed] .toc-list { overscroll-behavior: contain; }

/* 説明側（スクロールした先）。ここは読み物なので、行長は本文の作法のまま */
.app-page #about .tool-head h1 { font-size: clamp(22px, 3vw, 30px); }
/* 狭い画面ではページの左右余白（.wrap の20px）を打ち消して端まで使う。
   Yomuのツールバーは画面幅ぴったりで設計されており、40px削ると
   表示モード切替が潰れて横スクロールが出る（実測: 390pxで14pxはみ出す）。 */
/* 編集・プレビュー・目次の配分（実測して決めた）。
   既定は プレビューが広く・編集が狭い（読む道具の比率）だったが、Yomuは「書いて整える」道具。
   1440pxで 編集485 / プレビュー約700 だったのを、**編集とプレビューを対等**にする。
   目次は固定幅で、広い画面でだけ少し広げる（本文の幅を食わせない）。 */
.app[data-embed] .editor-pane { flex: 1 1 0; min-width: 0; }
.app[data-embed] .preview-pane { flex: 1 1 0; min-width: 0; }
.app[data-embed] .toc-pane { flex: 0 0 240px; }
@media (min-width: 1600px) {
  .app[data-embed] .toc-pane { flex: 0 0 280px; }
}
/* プレビューの本文は読み物なので行長を抑える（幅が広いと1行が長くなりすぎる）。
   ペイン自体は広げたまま、中身だけ中央に置く */
.app[data-embed] .md-body { max-width: 760px; margin-inline: auto; }

/* 指で押せる大きさ（監査: 34x34 のアイコンが並んでいた。WCAG 2.2の最低は24pxだが
   実用は44px。狭い画面だけ広げる＝広い画面の密度は保つ） */
@media (max-width: 860px) {
  .app[data-embed] .icon-btn,
  .app[data-embed] .yn-launch-btn,
  .app[data-embed] .seg-btn { min-width: 44px; min-height: 44px; }
  /* 指で押せる高さにすると、34pxのバーからはみ出して見えなくなる（実測）。
     バー自体を少し高くして、押せる大きさと見える状態を両立させる */
  .app[data-embed] .statusbar { min-height: 44px; }
  .app[data-embed] .statusbar .oka-link { min-height: 40px; align-items: center; }
  /* 書式ボタン（H1/太字/リンク…）は書いている間いちばん押す。1つ44pxだと11個で
     2段になり縦を食うため、38pxにして「押せるが場所は取りすぎない」に寄せる */
  .app[data-embed] .tool { min-width: 38px; min-height: 38px; }
  .app[data-embed] .toolbar { gap: 3px; }
  /* サンプル / クリア（誤タップすると書いたものが消える側なので、小さすぎるのは危険） */
  .app[data-embed] .pane-head .text-btn { min-height: 36px; padding-inline: 12px; }
}

/* 下端バーに足した導線（統合層が作る）。道具の一部として見えるようにする */
.statusbar .oka-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--yomu-text-dim); font-size: 11.5px; white-space: nowrap;
}
.statusbar .oka-link:hover { color: var(--yomu-accent); }
.statusbar .oka-link b { font-weight: 700; color: var(--yomu-ink-2); }
.statusbar .oka-sep { color: var(--yomu-line); }
/* 下端バーは**1行を保つ**。折り返しを許すと、高さが固定のまま2段目が切れて
   右端の印字が消える（実測: 900pxで見えなくなった）。狭くなったら、
   優先度の低い表示（語数・読了時間・区切りの点）から順に畳んで場所を作る。
   語数と読了時間は「詳細」から見られるので、失われる情報ではない。 */
@media (max-width: 1100px) {
  .app[data-embed] .statusbar { flex-wrap: nowrap; column-gap: 12px; }
  .app[data-embed] .statusbar .dot { display: none; }
  .app[data-embed] .statusbar .stat:has(#statWords),
  .app[data-embed] .statusbar .stat:has(#statTime) { display: none; }
}
@media (max-width: 720px) {
  .statusbar .oka-link.oka-more { display: none; } /* 狭い画面は印字と一覧だけ残す */
  .app[data-embed] .statusbar .file { max-width: 26vw; }
}

@media (max-width: 640px) {
  .app[data-embed] { margin-left: 0; margin-right: 0; width: 100%; border-radius: 0; }
  /* 表示モード切替（編集/分割/プレビュー）は縮めない。
     単体版に無い「ほかのツール」ボタンを足した分、狭い画面でここが最初に潰れて
     縦組み1文字幅になっていた（実測 24x98px）。潰すのではなく折り返す。 */
  .app[data-embed] .seg { flex: 0 0 auto; }
  .app[data-embed] .topbar { flex-wrap: wrap; row-gap: 6px; height: auto; padding-top: 6px; padding-bottom: 6px; }
}
/* 目次は狭い画面では画面外に退避する作り。単体版は position:fixed（＝スクロール領域の外）
   だが、埋め込みでは absolute になるため、退避中の目次が本文の横スクロール幅を作ってしまう。
   指で横に払うと編集面が消えて目次が現れる、という事故になるので刈り取る。hidden ではなく clip: hidden は overflow-y を auto に変え、
   縦スクロールの持ち主が入れ替わる副作用がある（各ペインが自前で縦スクロールする設計）。 */
@media (max-width: 820px) {
  .app[data-embed] .main { overflow-x: clip; }
}

/* 外部画像の扱い（プライバシー）。
   このサイトのCSPは img-src 'self' data: なので、本文に外部URLの画像があっても
   **通信自体が発生しない**（＝IPやUAが相手に渡らない）。ただし既定の見え方は
   「壊れた画像」なので、意図した挙動だと分かる枠と、プレビュー冒頭の説明を出す。
   画像のsrcは書き換えない — 書き出した .md / .html / .docx には元のURLが残る。 */
.md-body img[data-yomu-ext] {
  min-width: 120px; min-height: 44px; padding: 10px 14px;
  border: 1px dashed var(--yomu-line, #d7d3c8); border-radius: 8px;
  background: var(--yomu-surface-2, #f4f2ec); color: var(--yomu-text-dim, #6b6152);
  font-size: 12px; font-style: normal;
}
.yomu-extnote {
  margin: 0 0 14px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--yomu-line, #d7d3c8); background: var(--yomu-surface-2, #f4f2ec);
  color: var(--yomu-text-dim, #6b6152); font-size: 12px; line-height: 1.7;
}