:root{
  /* ロゴのパレット: 紺 #0b1f4d / 青 #2a8ff6 / 黄 #f7bd00 / ピンク #f0468c / 淡い青 #dbe8fa */
  --navy:#0b1f4d;--blue:#2a8ff6;--yellow:#f7bd00;--pink:#f0468c;--sky:#dbe8fa;
  --ink:#0b1f4d;--paper:#fff;--ink-60:rgba(11,31,77,.62);--ink-40:rgba(11,31,77,.42);--ink-20:rgba(11,31,77,.2);
  --ink-10:rgba(11,31,77,.1);--ink-06:rgba(11,31,77,.06);--ink-03:rgba(11,31,77,.035);
  --accent:#2a8ff6;--accent-10:rgba(42,143,246,.12);--accent-20:rgba(42,143,246,.22);--accent-ink:#fff;
  --sidebar:#f4f7fc;--ease:cubic-bezier(.22,1,.36,1);--t:.22s var(--ease);
  --font-en:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI Variable Display','Segoe UI',Helvetica,'Apple Color Emoji',Arial,sans-serif,'Segoe UI Emoji','Segoe UI Symbol';--font-jp:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI Variable Display','Segoe UI',Helvetica,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Yu Gothic','Meiryo',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';--font-mono:'SFMono-Regular',Menlo,Consolas,'PT Mono','Liberation Mono',Courier,monospace;
  --sb:260px;--radius:6px;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#e6ecf7;--paper:#0f1a33;--sidebar:#13203d;--ink-60:rgba(230,236,247,.62);--ink-40:rgba(230,236,247,.42);--ink-20:rgba(230,236,247,.2);--ink-10:rgba(230,236,247,.1);--ink-06:rgba(230,236,247,.07);--ink-03:rgba(230,236,247,.04);--accent:#4da3ff;--accent-10:rgba(77,163,255,.16);--accent-20:rgba(77,163,255,.28)}}
:root[data-theme="dark"]{--ink:#e6ecf7;--paper:#0f1a33;--sidebar:#13203d;--ink-60:rgba(230,236,247,.62);--ink-40:rgba(230,236,247,.42);--ink-20:rgba(230,236,247,.2);--ink-10:rgba(230,236,247,.1);--ink-06:rgba(230,236,247,.07);--ink-03:rgba(230,236,247,.04);--accent:#4da3ff;--accent-10:rgba(77,163,255,.16);--accent-20:rgba(77,163,255,.28)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--font-jp);color:var(--ink);background:var(--paper);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--ink-20)}
:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
[contenteditable]:focus{outline:none}
.num,.en{font-family:var(--font-en)}
#app{display:flex;height:100%}

/* ---------- sidebar ---------- */
.sb{width:var(--sb);flex:none;background:var(--sidebar);border-right:1px solid var(--ink-06);display:flex;flex-direction:column;transition:margin var(--t);overflow:hidden}
.sb.hidden{margin-left:calc(var(--sb) * -1)}
.sb-head{display:flex;align-items:center;gap:8px;padding:14px 12px 8px;font-family:var(--font-en);font-weight:600;letter-spacing:.02em}
.sb-head .brand{flex:1;font-size:14px}
.sb-nav{padding:0 8px}
.sb-scroll{flex:1;overflow:auto;padding:4px 8px 24px}
.sb-sec{font-size:11px;color:var(--ink-40);padding:14px 8px 4px;font-family:var(--font-en);font-weight:500}
.sb-sec:first-child{padding-top:6px}
.item{display:flex;align-items:center;gap:4px;height:28px;padding:0 6px 0 4px;border-radius:var(--radius);color:var(--ink-60);font-size:14px;cursor:pointer;transition:background var(--t),color var(--t);position:relative;user-select:none}
.item:hover{background:var(--ink-06);color:var(--ink)}
.item.active{background:var(--ink-10);color:var(--ink);font-weight:500}
.item .tw{width:18px;height:18px;border-radius:4px;display:grid;place-items:center;color:var(--ink-40);flex:none;transition:transform var(--t),background var(--t)}
.item .tw:hover{background:var(--ink-10);color:var(--ink)}
.item .tw.open{transform:rotate(90deg)}
.item .ic{width:18px;text-align:center;flex:none;font-size:15px;line-height:1}
.item .lb{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .lb.empty{color:var(--ink-40)}
.item .act{display:none;gap:2px}
.item:hover .act{display:flex}
.item .act button{width:20px;height:20px;border-radius:4px;display:grid;place-items:center;color:var(--ink-40)}
.item .act button:hover{background:var(--ink-10);color:var(--ink)}
.item.drop-in{box-shadow:inset 0 0 0 1.5px var(--ink)}
.item.drop-before{box-shadow:inset 0 2px 0 var(--ink)}
.item.drop-after{box-shadow:inset 0 -2px 0 var(--ink)}
.tree .tree{margin-left:14px}
.sb-foot{padding:8px;border-top:1px solid var(--ink-06)}
.sb-empty{padding:4px 8px;font-size:12px;color:var(--ink-40)}

/* ---------- main ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.top{height:44px;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:14px;flex:none;position:sticky;top:env(safe-area-inset-top,0px);background:var(--paper);z-index:5}
.top .crumbs{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;flex:1}
.top .crumb{padding:2px 6px;border-radius:4px;white-space:nowrap;cursor:pointer;color:var(--ink-60);transition:background var(--t)}
.top .crumb:hover{background:var(--ink-06);color:var(--ink)}
.top .crumb.cur{color:var(--ink)}
.top .sep{color:var(--ink-20)}
.top .meta{font-size:12px;color:var(--ink-40);font-family:var(--font-en);white-space:nowrap}
.ib{width:28px;height:28px;border-radius:var(--radius);display:grid;place-items:center;color:var(--ink-60);transition:background var(--t),color var(--t)}
.ib:hover{background:var(--ink-06);color:var(--ink)}
.ib svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scroll{flex:1;overflow:auto}
.page{max-width:760px;margin:0 auto;padding:0 56px 40vh}
.page.wide{max-width:none;padding-left:56px;padding-right:56px}
.cover{height:200px;background:var(--ink-06);background-size:cover;background-position:center;position:relative;transition:background var(--t)}
.cover .cover-act{position:absolute;right:16px;bottom:12px;display:flex;gap:6px;opacity:0;transition:opacity var(--t)}
.cover:hover .cover-act{opacity:1}
.chip{font-size:12px;padding:3px 8px;border-radius:4px;background:var(--paper);color:var(--ink-60);border:1px solid var(--ink-10);transition:background var(--t),color var(--t)}
.chip:hover{color:var(--ink);background:var(--ink-06)}
.head{padding-top:72px;position:relative}
.head.has-cover{padding-top:24px}
.icon-big{font-size:72px;line-height:1;height:80px;display:inline-grid;place-items:center;cursor:pointer;border-radius:8px;transition:background var(--t);user-select:none;margin-top:-56px;margin-bottom:8px}
.icon-big:hover{background:var(--ink-06)}
.head-act{display:flex;gap:4px;opacity:0;transition:opacity var(--t);height:28px;margin-bottom:4px}
.head:hover .head-act{opacity:1}
.head-act button{font-size:13px;color:var(--ink-40);padding:4px 8px;border-radius:4px;transition:background var(--t),color var(--t)}
.head-act button:hover{background:var(--ink-06);color:var(--ink)}
.title{font-size:40px;font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px;min-height:48px;word-break:break-word}
.title:empty::before{content:attr(data-ph);color:var(--ink-20)}

/* ---------- blocks ---------- */
.blocks{padding-top:12px}
.blk{display:flex;align-items:flex-start;position:relative;margin:1px 0;border-radius:4px}
.blk.dragging{opacity:.4}
.blk.drop-before::before{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--ink)}
.blk.drop-after::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink)}
.blk .gut{width:44px;margin-left:-44px;flex:none;display:flex;justify-content:flex-end;gap:2px;padding-top:3px;opacity:0;transition:opacity var(--t)}
.blk:hover .gut,.blk.menu-open .gut{opacity:1}
.blk .gut button{width:20px;height:22px;border-radius:4px;display:grid;place-items:center;color:var(--ink-40);transition:background var(--t),color var(--t)}
.blk .gut button:hover{background:var(--ink-06);color:var(--ink)}
.blk .gut .hd{cursor:grab}
.blk .gut svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.blk .body{flex:1;min-width:0;display:flex;align-items:flex-start;gap:6px;padding:3px 2px}
.blk .txt{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word;caret-color:var(--ink)}
.blk .txt:empty::before{content:attr(data-ph);color:var(--ink-20);pointer-events:none}
.blk .txt:not(:focus):empty::before{content:''}
.blk.t-text .txt:not(:focus):empty::before{content:''}
.blk[data-ind="1"]{margin-left:28px}.blk[data-ind="2"]{margin-left:56px}.blk[data-ind="3"]{margin-left:84px}.blk[data-ind="4"]{margin-left:112px}.blk[data-ind="5"]{margin-left:140px}
.blk.t-h1{margin-top:28px}.blk.t-h1 .txt{font-size:30px;font-weight:700;line-height:1.3;letter-spacing:-.01em}.blk.t-h1 .txt:not(:focus):empty::before{content:attr(data-ph)}
.blk.t-h2{margin-top:20px}.blk.t-h2 .txt{font-size:24px;font-weight:700;line-height:1.3}.blk.t-h2 .txt:not(:focus):empty::before{content:attr(data-ph)}
.blk.t-h3{margin-top:14px}.blk.t-h3 .txt{font-size:19px;font-weight:700;line-height:1.3}.blk.t-h3 .txt:not(:focus):empty::before{content:attr(data-ph)}
.blk .mk{flex:none;width:24px;text-align:center;line-height:24px;font-family:var(--font-en);color:var(--ink)}
.blk.t-bullet .mk::before{content:'•';font-size:18px}
.blk.t-numbered .mk{font-variant-numeric:tabular-nums}
.blk.t-todo .mk{display:grid;place-items:center}
.blk .cb{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:3px;display:grid;place-items:center;cursor:pointer;transition:background var(--t)}
.blk .cb.on{background:var(--ink)}
.blk .cb.on::after{content:'';width:5px;height:9px;border:solid var(--paper);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.blk.t-todo.done .txt{color:var(--ink-40);text-decoration:line-through}
.blk.t-toggle .mk{cursor:pointer;transition:transform var(--t)}
.blk.t-toggle .mk::before{content:'▸';font-size:16px}
.blk.t-toggle.open .mk{transform:rotate(90deg)}
.blk.t-quote .body{border-left:3px solid var(--ink);padding-left:14px;margin:4px 0}
.blk.t-callout .body{background:var(--ink-03);border-radius:var(--radius);padding:14px 16px;margin:4px 0;border:1px solid var(--ink-06)}
.blk.t-callout .mk{font-size:18px;cursor:pointer;width:28px;line-height:24px}
.blk.t-code .body{display:block;background:var(--ink-03);border:1px solid var(--ink-06);border-radius:var(--radius);padding:0;margin:4px 0;overflow:hidden}
.blk.t-code .code-bar{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;border-bottom:1px solid var(--ink-06);font-size:12px;color:var(--ink-40)}
.blk.t-code .code-bar input{border:0;background:none;width:120px;font-family:var(--font-en);font-size:12px;padding:0;color:var(--ink-60)}
.blk.t-code .code-bar button{font-size:12px;color:var(--ink-40)}.blk.t-code .code-bar button:hover{color:var(--ink)}
.blk.t-code .txt{font-family:var(--font-mono);font-size:13px;line-height:1.6;padding:12px 16px;tab-size:2}
.blk.t-divider .body{padding:8px 0}.blk.t-divider hr{border:0;border-top:1px solid var(--ink-20);margin:0;width:100%}
.blk.t-image .body{display:block}.blk.t-image img{max-width:100%;border-radius:var(--radius);display:block}
.blk.t-image .ph{display:flex;align-items:center;gap:10px;background:var(--ink-03);border:1px solid var(--ink-06);border-radius:var(--radius);padding:12px 16px;color:var(--ink-40);font-size:14px}
.blk.t-image .ph input{flex:1;border:0;background:none;border-bottom:1px solid var(--ink-20);padding:2px 0;font-size:13px}
.blk.t-image .cap{font-size:13px;color:var(--ink-40);padding:4px 2px}
.blk.t-image .cap:not(:focus):empty::before{content:attr(data-ph)}
.blk.t-page .body{padding:4px 6px;border-radius:var(--radius);cursor:pointer;transition:background var(--t);align-items:center}
.blk.t-page .body:hover{background:var(--ink-06)}
.blk.t-page .lb{font-weight:500;text-decoration:underline;text-decoration-color:var(--ink-20);text-underline-offset:3px}
.blk.t-page .lb.empty{color:var(--ink-40);font-weight:400;text-decoration:none}
.blk.t-bookmark .body a{display:block;border:1px solid var(--ink-10);border-radius:var(--radius);padding:10px 14px;text-decoration:none;font-size:13px;word-break:break-all;transition:background var(--t)}
.blk.t-bookmark .body a:hover{background:var(--ink-03)}
.blk.hidden{display:none}
.txt b,.txt strong{font-weight:700}.txt i,.txt em{font-style:italic}
.txt code{font-family:var(--font-mono);font-size:.88em;background:var(--ink-06);padding:1px 5px;border-radius:3px}
.txt a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-40)}
.txt s{color:var(--ink-40)}
.txt u{text-underline-offset:3px}

/* ---------- popovers / menus ---------- */
.pop{position:fixed;z-index:95;background:var(--paper);border:1px solid var(--ink-10);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.14);min-width:220px;max-width:340px;max-height:min(420px,70vh);overflow:auto;padding:6px;animation:popin .16s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.pop .ph{font-size:11px;color:var(--ink-40);padding:6px 8px 2px;font-family:var(--font-en)}
.pop .mi{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:5px;cursor:pointer;font-size:14px;transition:background var(--t)}
.pop .mi:hover,.pop .mi.sel{background:var(--ink-06)}
.pop .mi.danger{color:var(--ink-60)}
.pop .mi .k{width:28px;height:28px;flex:none;display:grid;place-items:center;border:1px solid var(--ink-10);border-radius:5px;font-family:var(--font-en);font-size:13px;font-weight:600}
.pop .mi .d{flex:1;min-width:0}.pop .mi .d small{display:block;color:var(--ink-40);font-size:12px;line-height:1.3}
.pop .mi .sc{font-family:var(--font-en);font-size:11px;color:var(--ink-40)}
.pop hr{border:0;border-top:1px solid var(--ink-06);margin:5px 0}
.pop input.f,.pop select.f{width:100%;border:1px solid var(--ink-10);border-radius:5px;padding:6px 8px;background:var(--paper);font-size:13px;margin:4px 0}
.pop input.f:focus{outline:none;border-color:var(--ink)}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:4px}
.emoji-grid button{height:32px;font-size:20px;border-radius:4px;transition:background var(--t)}
.emoji-grid button:hover{background:var(--ink-06)}
.swatches{display:flex;gap:6px;padding:6px 8px;flex-wrap:wrap}
.swatches button{width:28px;height:20px;border-radius:3px;border:1px solid var(--ink-10)}
.inline-bar{position:fixed;z-index:60;background:var(--ink);color:var(--paper);border-radius:6px;display:flex;padding:3px;gap:1px;box-shadow:0 6px 20px rgba(0,0,0,.2);animation:popin .14s var(--ease)}
.inline-bar button{width:30px;height:28px;border-radius:4px;font-family:var(--font-en);font-size:13px;color:var(--paper);display:grid;place-items:center;transition:background var(--t)}
.inline-bar button:hover{background:rgba(255,255,255,.18)}
.inline-bar .sep{width:1px;background:rgba(255,255,255,.25);margin:4px 3px}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:80;display:grid;place-items:start center;padding-top:12vh;animation:fadein .18s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{width:min(620px,92vw);background:var(--paper);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;animation:popin .2s var(--ease);max-height:70vh;display:flex;flex-direction:column}
.modal .q{border:0;border-bottom:1px solid var(--ink-06);padding:16px 18px;font-size:17px;background:none;width:100%}
.modal .q:focus{outline:none}
.modal .res{overflow:auto;padding:6px}
.modal .r{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:6px;cursor:pointer;transition:background var(--t)}
.modal .r:hover,.modal .r.sel{background:var(--ink-06)}
.modal .r .ic{width:20px;text-align:center}.modal .r .d{flex:1;min-width:0}.modal .r .d small{display:block;color:var(--ink-40);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal .foot{padding:8px 14px;font-size:12px;color:var(--ink-40);border-top:1px solid var(--ink-06);font-family:var(--font-en);display:flex;gap:14px}
.modal .body{padding:18px;overflow:auto;font-size:14px}
.modal .body h3{margin:0 0 8px;font-size:16px}
.modal .body p{margin:0 0 10px;color:var(--ink-60)}
.modal .body .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.btn{border:1px solid var(--ink-20);border-radius:6px;padding:6px 14px;font-size:13px;transition:background var(--t),color var(--t);background:var(--paper)}
.btn:hover{background:var(--ink-06)}
.btn.pri{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.pri:hover{opacity:.85}
.btn:disabled{opacity:.4;cursor:default}
.drop-zone{border:1.5px dashed var(--ink-20);border-radius:8px;padding:28px;text-align:center;color:var(--ink-60);transition:background var(--t),border-color var(--t);cursor:pointer}
.drop-zone:hover,.drop-zone.over{background:var(--ink-03);border-color:var(--ink)}
.log{font-family:var(--font-en);font-size:12px;color:var(--ink-60);max-height:180px;overflow:auto;background:var(--ink-03);padding:8px 10px;border-radius:6px;margin-top:10px;white-space:pre-wrap}

/* ---------- database ---------- */
.db-bar{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--ink-10);margin-top:8px;flex-wrap:wrap}
.db-bar .vt{padding:6px 10px;font-size:14px;color:var(--ink-60);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t),border-color var(--t);display:flex;gap:6px;align-items:center;white-space:nowrap}
.db-bar .vt:hover{color:var(--ink)}.db-bar .vt.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:500}
.db-bar .sp{flex:1}
.db-bar .tb{font-size:13px;color:var(--ink-60);padding:4px 8px;border-radius:4px;transition:background var(--t),color var(--t);white-space:nowrap}
.db-bar .tb:hover{background:var(--ink-06);color:var(--ink)}
.db-bar .tb.on{color:var(--ink);font-weight:500}
.db-wrap{overflow-x:auto;padding-bottom:12px;margin-top:4px}
table.dbt{border-collapse:collapse;font-size:14px;min-width:100%}
.dbt th,.dbt td{border-bottom:1px solid var(--ink-06);text-align:left;vertical-align:top;padding:0}
.dbt th{font-weight:400;color:var(--ink-60);font-size:13px;white-space:nowrap}
.dbt th .hc{display:flex;align-items:center;gap:6px;padding:7px 8px;cursor:pointer;border-radius:4px;transition:background var(--t);min-width:120px}
.dbt th .hc:hover{background:var(--ink-06)}
.dbt th .hc .ty{color:var(--ink-40);font-family:var(--font-en);font-size:11px}
.dbt th.add .hc{min-width:36px;justify-content:center;color:var(--ink-40)}
.dbt td .cell{padding:7px 8px;min-height:36px;min-width:120px;max-width:360px;outline:none;transition:background var(--t);word-break:break-word}
.dbt td .cell:hover{background:var(--ink-03)}
.dbt td .cell:focus{box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:3px;background:var(--paper)}
.dbt td.t .cell{display:flex;align-items:center;gap:6px;min-width:200px;font-weight:500}
.dbt td.t .open{opacity:0;font-size:11px;padding:2px 6px;border:1px solid var(--ink-20);border-radius:4px;color:var(--ink-60);transition:opacity var(--t);margin-left:auto;font-family:var(--font-en)}
.dbt tr:hover td.t .open{opacity:1}
.dbt td .cell.ttl{min-width:200px}
.dbt tr.new td{color:var(--ink-40);cursor:pointer}
.dbt tr.new td .cell:hover{background:var(--ink-06)}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border-radius:3px;background:var(--ink-06);border:1px solid var(--ink-10);margin:1px 3px 1px 0;white-space:nowrap}
.cb-cell{width:16px;height:16px;border:1.5px solid var(--ink);border-radius:3px;display:inline-grid;place-items:center;cursor:pointer;vertical-align:middle;transition:background var(--t)}
.cb-cell.on{background:var(--ink)}.cb-cell.on::after{content:'';width:5px;height:9px;border:solid var(--paper);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.num-cell{font-family:var(--font-en);font-variant-numeric:tabular-nums}
.date-cell{font-family:var(--font-en);font-size:13px}
.url-cell a{font-size:13px;word-break:break-all}
.board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding:14px 0 20px}
.col{width:260px;flex:none}
.col .ch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-60);padding:0 4px 8px}
.col .ch .n{font-family:var(--font-en);color:var(--ink-40)}
.card{border:1px solid var(--ink-10);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:pointer;background:var(--paper);transition:border-color var(--t),transform var(--t)}
.card:hover{border-color:var(--ink)}
.card.dragging{opacity:.4}
.card .ct{font-weight:500;margin-bottom:4px}
.card .cp{font-size:12px;color:var(--ink-60);margin-top:4px}
.col.over{outline:1.5px dashed var(--ink-20);outline-offset:4px;border-radius:6px}
.col .addc{width:100%;text-align:left;padding:6px 8px;color:var(--ink-40);font-size:13px;border-radius:4px;transition:background var(--t),color var(--t)}
.col .addc:hover{background:var(--ink-06);color:var(--ink)}
.list .li{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--ink-06);cursor:pointer;transition:background var(--t)}
.list .li:hover{background:var(--ink-03)}
.list .li .lt{flex:1;font-weight:500}
.list .li .lp{font-size:12px;color:var(--ink-60);font-family:var(--font-en)}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:14px 0}
.gal .card{margin:0}
.gal .card .cov{height:110px;background:var(--ink-06);border-radius:4px;margin:-10px -12px 10px;background-size:cover;background-position:center;display:grid;place-items:center;font-size:36px}
.empty:not(.lb){padding:40px 0;text-align:center;color:var(--ink-40);font-size:14px}
.prop-row{display:flex;align-items:flex-start;gap:8px;font-size:14px;margin:2px 0;min-height:32px}
.prop-row .pn{width:150px;flex:none;color:var(--ink-60);padding:6px 6px;display:flex;align-items:center;gap:6px;font-size:13px}
.prop-row .pv{flex:1;padding:6px;border-radius:4px;min-height:32px;transition:background var(--t)}
.prop-row .pv:hover{background:var(--ink-03)}
.prop-row .pv:focus{box-shadow:inset 0 0 0 1.5px var(--ink);outline:none}
.props{margin:4px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--ink-06)}
.props .addp{font-size:13px;color:var(--ink-40);padding:6px;border-radius:4px}
.props .addp:hover{background:var(--ink-06);color:var(--ink)}

/* ---------- peek ---------- */
.peek{position:fixed;top:env(safe-area-inset-top,0px);right:0;bottom:0;width:min(640px,100vw);background:var(--paper);border-left:1px solid var(--ink-10);box-shadow:-12px 0 40px rgba(0,0,0,.12);z-index:40;display:flex;flex-direction:column;animation:peekin .26s var(--ease)}
@keyframes peekin{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.peek .scroll .page{padding:0 48px 30vh}
.peek .head{padding-top:36px}

/* ---------- trash ---------- */
.trash-list .tr{display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid var(--ink-06)}
.trash-list .tr .lb{flex:1}
.trash-list .tr small{color:var(--ink-40);font-family:var(--font-en);font-size:12px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:6px;font-size:13px;z-index:90;animation:popin .2s var(--ease);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.kbd{font-family:var(--font-en);font-size:11px;border:1px solid var(--ink-20);border-radius:3px;padding:0 5px;color:var(--ink-60)}

@media (max-width:860px){
  .sb{position:fixed;inset:0 auto 0 0;z-index:30;box-shadow:12px 0 40px rgba(0,0,0,.12)}
  .sb.hidden{box-shadow:none}
  .page,.page.wide{padding-left:20px;padding-right:20px}
  .blk .gut{margin-left:-20px;width:20px}
  .title{font-size:30px}
  .head{padding-top:48px}
}

/* ---------- fixes ---------- */
.item .ic svg,.blk .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.dbt td.t .open{flex:none;white-space:nowrap;align-self:center;margin-right:6px}
.blocks .blk:only-child.t-text .txt:empty::before{content:attr(data-ph)}
.pop .mi .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- table block / file / upload ---------- */
.blk.t-table .body{display:block;padding:6px 0}
.tbl-wrap{position:relative;overflow-x:auto;padding:0 28px 28px 0}
table.tb{border-collapse:collapse;width:100%;font-size:14px}
.tb td{border:1px solid var(--ink-10);padding:0;vertical-align:top;min-width:96px}
.tb td [contenteditable]{padding:7px 10px;min-height:36px;outline:none;white-space:pre-wrap;word-break:break-word}
.tb td [contenteditable]:focus{box-shadow:inset 0 0 0 1.5px var(--ink)}
.tb.hdr tr:first-child td{background:var(--ink-03);font-weight:500}
.tb-add{position:absolute;background:var(--ink-03);color:var(--ink-40);border:1px solid var(--ink-06);display:grid;place-items:center;font-family:var(--font-en);opacity:0;transition:opacity var(--t),background var(--t),color var(--t)}
.tbl-wrap:hover .tb-add{opacity:1}
.tb-add:hover{background:var(--ink-10);color:var(--ink)}
.tb-add.col{top:0;right:0;width:22px;height:calc(100% - 28px);border-radius:4px}
.tb-add.row{left:0;bottom:0;height:22px;width:calc(100% - 28px);border-radius:4px}
.tb-add.opt{right:0;bottom:0;width:22px;height:22px;border-radius:4px}
.tb-add.opt svg{width:14px;height:14px}
.file-card{display:flex;align-items:center;gap:10px;border:1px solid var(--ink-10);border-radius:var(--radius);padding:10px 14px;text-decoration:none;transition:background var(--t);width:100%}
.file-card:hover{background:var(--ink-03)}
.file-card .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.file-card .fs{font-size:12px;color:var(--ink-40)}
.blk.t-file .body{display:block}
.blk.t-file .ph,.blk.t-image .ph{display:flex;align-items:center;gap:10px;background:var(--ink-03);border:1px solid var(--ink-06);border-radius:var(--radius);padding:12px 16px;color:var(--ink-40);font-size:14px}
.blk.t-file .ph:focus{outline:none;border-color:var(--ink)}
.blocks.file-over{outline:1.5px dashed var(--ink-20);outline-offset:8px;border-radius:6px}

/* ---------- iconsax ---------- */
svg.rot90{transform:rotate(90deg)}svg.rot45{transform:rotate(45deg)}
.ib svg,.blk .gut svg,.item .ic svg,.pop .mi .ic svg,.inline-bar svg,.pop .mi .k svg,.vi svg,.file-card .fi svg,.blk .ph .fi svg{width:18px;height:18px;stroke-width:1.5;display:block}
.ib svg{width:18px;height:18px}
.blk .gut svg{width:16px;height:16px}
.item .ic svg,.pop .mi .ic svg{width:16px;height:16px}
.pop .mi .k{border:1px solid var(--ink-10);width:30px;height:30px}
.pop .mi .k svg{width:17px;height:17px}
.inline-bar button svg{width:16px;height:16px}
.vi{display:inline-flex;color:var(--ink-40)}.vi svg{width:15px;height:15px}
.file-card .fi svg,.blk .ph .fi svg{width:20px;height:20px;color:var(--ink-60)}
.blk.t-page .ic svg{width:16px;height:16px;display:block}

/* ---------- v2: user / presence / history / members ---------- */
.av{display:inline-grid;place-items:center;border-radius:50%;color:#fff;font-weight:600;object-fit:cover;flex:none;overflow:hidden;line-height:1}
img.av{background:var(--ink-10)}
.sb-head .ws{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--radius);transition:background var(--t);min-width:0}
.sb-head .ws:hover{background:var(--ink-06)}
.sb-head .brand{font-size:14px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.me-card{display:flex;gap:10px;align-items:center;padding:8px 8px 4px}
.presence-bar{display:flex;align-items:center;margin-right:6px}
.presence-bar .pav{margin-left:-6px;border-radius:50%;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--pc,var(--ink));display:inline-flex}
.presence-bar .pav:first-child{margin-left:0}
.ib.on{color:var(--ink);background:var(--ink-06)}
.blk.remote::before{content:'';position:absolute;left:-10px;top:2px;bottom:2px;width:2px;background:var(--pc,var(--ink));border-radius:2px}
.blk.remote::after{content:attr(data-who);position:absolute;right:0;top:-14px;font-size:10px;line-height:1;padding:2px 6px;border-radius:3px;background:var(--pc,var(--ink));color:#fff;pointer-events:none;white-space:nowrap}
.title.remote{box-shadow:inset 3px 0 0 var(--pc,var(--ink));padding-left:10px;position:relative}
.title.remote::after{content:attr(data-who);position:absolute;right:0;top:-12px;font-size:10px;font-weight:400;padding:2px 6px;border-radius:3px;background:var(--pc,var(--ink));color:#fff}
.blk.flash{animation:flash 1.6s var(--ease)}
@keyframes flash{0%{background:var(--ink-10)}100%{background:transparent}}
.person{display:inline-flex;align-items:center;gap:6px}
.hist{width:320px;flex:none;border-left:1px solid var(--ink-06);display:flex;flex-direction:column;background:var(--paper);animation:peekin .22s var(--ease)}
.hist-head{display:flex;align-items:center;gap:2px;padding:8px 10px;border-bottom:1px solid var(--ink-06)}
.hist-head .ht{font-size:13px;color:var(--ink-60);padding:6px 10px;border-radius:4px;transition:background var(--t),color var(--t)}
.hist-head .ht:hover{color:var(--ink);background:var(--ink-06)}.hist-head .ht.on{color:var(--ink);font-weight:500;background:var(--ink-06)}
.hist-body{flex:1;overflow:auto;padding:6px 8px 24px}
.hday{font-size:11px;color:var(--ink-40);padding:12px 8px 4px}
.hv,.ha{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:6px;cursor:pointer;transition:background var(--t);font-size:13px}
.hv:hover,.ha:hover{background:var(--ink-03)}
.hv.sel{background:var(--ink-06)}
.hv .d,.ha .d{flex:1;min-width:0}
.hv .ln{display:flex;align-items:center;gap:6px}
.hv .tm{font-weight:500}.ha .tm{color:var(--ink-40);font-size:11px;margin-left:6px}
.hv .who{color:var(--ink-60);font-size:12px}
.cur-tag{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--ink);color:var(--paper)}
.ha .ln{line-height:1.5}
.ha .dif{font-size:12px;color:var(--ink-60);margin-top:2px;word-break:break-word;border-left:2px solid var(--ink-10);padding-left:8px}
.ha .dif s{color:var(--ink-40)}
.snap-bar{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:14px;padding:8px 16px;background:var(--ink);color:var(--paper);font-size:13px}
.snap-bar .btn{background:transparent;color:var(--paper);border-color:rgba(255,255,255,.4);padding:4px 10px;font-size:12px}
.snap-bar .btn.pri{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.snap-bar .legend{display:flex;align-items:center;gap:6px;font-size:11px;opacity:.85}
.snap-bar .lg{display:inline-block;width:10px;height:10px;border-radius:2px;margin-left:8px}
.snap-bar .lg.add{background:var(--paper)}.snap-bar .lg.mod{background:transparent;border:1.5px dashed var(--paper)}.snap-bar .lg.del{background:rgba(255,255,255,.35)}
.page.snap .title{margin-top:24px}
.blocks.ro .blk{padding-left:6px;margin-left:-6px;border-left:3px solid transparent}
.blocks.ro .blk.diff-add{border-left-color:var(--ink);background:var(--ink-03)}
.blocks.ro .blk.diff-mod{border-left-style:dashed;border-left-color:var(--ink-40);background:var(--ink-03)}
.blocks.ro .blk.diff-del{border-left-color:var(--ink-20);opacity:.55}
.blocks.ro .blk.diff-del .txt,.blocks.ro .blk.diff-del .lb{text-decoration:line-through}
.blocks.ro .txt{cursor:default}
.note{font-size:13px;color:var(--ink-60);margin:0 0 16px}
.add-row{display:flex;gap:8px;align-items:center;margin-bottom:20px}
.add-row .f{border:1px solid var(--ink-10);border-radius:5px;padding:6px 8px;background:var(--paper);font-size:13px}
.add-row .f:focus{outline:none;border-color:var(--ink)}
table.members{border-collapse:collapse;width:100%;font-size:14px}
.members th{text-align:left;font-weight:400;color:var(--ink-60);font-size:12px;padding:6px 8px;border-bottom:1px solid var(--ink-10)}
.members td{padding:8px;border-bottom:1px solid var(--ink-06);vertical-align:middle}
.f.sm{font-size:13px;padding:3px 6px;border:1px solid var(--ink-10);border-radius:4px;background:var(--paper)}
.btn.sm{padding:3px 10px;font-size:12px}
.tag.off{color:var(--ink-40);text-decoration:line-through}
@media (max-width:1100px){.hist{position:fixed;right:0;top:env(safe-area-inset-top,0px);bottom:0;z-index:35;box-shadow:-12px 0 40px rgba(0,0,0,.12)}}

/* ---------- profile ---------- */
.prof .prof-row{display:flex;gap:18px;align-items:center;margin:6px 0 16px}
.prof .prof-av .av{font-size:28px}
.prof .prof-btns{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.prof .lbl{display:block;font-size:12px;color:var(--ink-40);margin:10px 0 4px}
.prof input.f{width:100%;border:1px solid var(--ink-10);border-radius:5px;padding:7px 9px;background:var(--paper);font-size:14px}
.prof input.f:focus{outline:none;border-color:var(--ink)}
.prof .swatches{padding:0}
.prof .swatches button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;transition:transform var(--t)}
.prof .swatches button.on{border-color:var(--paper);box-shadow:0 0 0 2px var(--ink)}

/* ---------- v3: comments / notifications / share / mentions / db extras / editor extras ---------- */
.mention{display:inline-block;padding:0 4px;border-radius:3px;background:var(--ink-06);font-weight:500;text-decoration:none;cursor:pointer}
a.mention{text-decoration:none;border-bottom:1px solid var(--ink-20)}
.mention.user{color:var(--ink)}
.backlinks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px;font-size:12px;color:var(--ink-40)}
.backlinks .bl-h{display:inline-flex;align-items:center;gap:4px}.backlinks .bl-h svg{width:14px;height:14px;stroke-width:1.5}
.backlinks .bl{font-size:12px;padding:1px 8px;border:1px solid var(--ink-10);border-radius:10px;color:var(--ink-60);transition:background var(--t)}
.backlinks .bl:hover{background:var(--ink-06);color:var(--ink)}
.ro-note{font-size:12px;color:var(--ink-40);border:1px solid var(--ink-10);border-radius:4px;padding:4px 10px;display:inline-block;margin-bottom:8px}
.page.ro .gut,.page.ro .tb-add,.page.ro .db-bar .btn,.page.ro tr.new,.page.ro .addc,.page.ro .addp,.page.ro .cal-add,.page.ro .head-act{display:none!important}
.page.ro .cell,.page.ro .pv{pointer-events:none}
.share-btn{padding:4px 10px;font-size:12px;margin-left:4px;white-space:nowrap}
.bell{position:relative}.bell .cnt{position:absolute;top:2px;right:0;min-width:15px;height:15px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:10px;line-height:15px;text-align:center;padding:0 4px}
.notif-pop{min-width:340px}
.pop .mi.nt{align-items:flex-start}.pop .mi.nt.unread{background:var(--ink-03)}.pop .mi.nt .d{font-size:13px;line-height:1.4}
.blk.has-c::after{content:attr(data-cn);position:absolute;right:-26px;top:4px;font-size:10px;line-height:16px;min-width:16px;text-align:center;border:1px solid var(--ink-20);border-radius:8px;color:var(--ink-60);padding:0 3px;background:var(--paper)}
.blk.has-c{position:relative}
.cpanel .c-target{border:1px solid var(--ink-10);border-radius:6px;padding:8px;margin:6px 0 10px}
.c-quote{font-size:12px;color:var(--ink-60);border-left:2px solid var(--ink-20);padding-left:8px;margin:4px 0;cursor:pointer}
.c-quote.small{margin:0 0 6px}
.thread{border-bottom:1px solid var(--ink-06);padding:10px 4px}
.thread.resolved{opacity:.55}
.cm{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:4px 0}
.cm .d{flex:1;min-width:0}.cm .ln b{font-weight:600}.cm .tm{color:var(--ink-40);font-size:11px;margin-left:6px}
.cm .ctext{white-space:pre-wrap;word-break:break-word}
.reply{margin-left:28px;border-left:2px solid var(--ink-06);padding-left:8px}
.c-actions{display:flex;gap:4px;margin-top:4px}
.composer{display:flex;gap:8px;align-items:flex-start;margin:6px 0 10px}
.composer .d{flex:1}.composer textarea{width:100%;border:1px solid var(--ink-10);border-radius:6px;padding:6px 8px;font:inherit;font-size:13px;resize:vertical;background:var(--paper)}
.composer textarea:focus{outline:none;border-color:var(--ink)}
.composer .c-row{display:flex;justify-content:flex-end;margin-top:4px}
.ib.sm{width:22px;height:22px}.ib.sm svg{width:14px;height:14px}
.share-list{border:1px solid var(--ink-06);border-radius:6px;padding:4px 8px}
.share-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--ink-06);font-size:14px}
.share-row:last-child{border-bottom:0}.share-row .person{flex:1}.share-row .sc{font-size:12px;color:var(--ink-40)}
.modal .body .lbl{display:block;font-size:12px;color:var(--ink-40);margin:8px 0 4px}
.modal .body select.f,.modal .body input.f{width:100%;border:1px solid var(--ink-10);border-radius:5px;padding:7px 9px;background:var(--paper);font-size:14px}
.tag.rel{cursor:pointer;text-decoration:underline;text-decoration-color:var(--ink-20);text-underline-offset:2px}
.cell.computed{color:var(--ink-60)}
.grouped .grp-h{display:flex;align-items:center;gap:8px;padding:14px 4px 6px;font-size:13px}
.grouped .grp-h .n{color:var(--ink-40);font-family:var(--font-en)}
.cal{margin-top:12px}.cal-h{display:flex;align-items:center;gap:6px;margin-bottom:8px}.cal-t{font-weight:600;font-size:15px;min-width:120px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--ink-06);border-top:1px solid var(--ink-06)}
.cal-dow{font-size:11px;color:var(--ink-40);text-align:center;padding:4px 0;border-right:1px solid var(--ink-06);border-bottom:1px solid var(--ink-06)}
.cal-cell{min-height:92px;border-right:1px solid var(--ink-06);border-bottom:1px solid var(--ink-06);padding:4px;font-size:12px;position:relative}
.cal-cell.out{color:var(--ink-20);background:var(--ink-03)}
.cal-cell.today .cal-d>span,.cal-cell.today .cal-d{font-weight:700}
.cal-d{display:flex;justify-content:space-between;align-items:center;color:var(--ink-60);font-family:var(--font-en)}
.cal-add{opacity:0;width:18px;height:18px;border-radius:3px;display:grid;place-items:center;color:var(--ink-40)}.cal-add svg{width:12px;height:12px}
.cal-cell:hover .cal-add{opacity:1}.cal-add:hover{background:var(--ink-10)}
.cal-ev{font-size:12px;padding:2px 6px;border:1px solid var(--ink-10);border-radius:3px;margin-top:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--paper);transition:border-color var(--t)}
.cal-ev:hover{border-color:var(--ink)}
.tl{margin-top:12px;border:1px solid var(--ink-06);border-radius:6px;overflow:hidden;font-size:13px}
.tl-head,.tl-row{display:flex;border-bottom:1px solid var(--ink-06)}
.tl-label{width:200px;flex:none;padding:6px 10px;border-right:1px solid var(--ink-06);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tl-head .tl-label{cursor:default}
.tl-scroll{flex:1;overflow-x:auto;scrollbar-width:none}.tl-scroll::-webkit-scrollbar{display:none}
.tl-scale{display:flex;height:30px}.tl-day{flex:none;text-align:center;font-size:10px;color:var(--ink-40);border-right:1px solid var(--ink-06);line-height:30px;font-family:var(--font-en)}
.tl-day.we{background:var(--ink-03)}.tl-day.today{color:var(--ink);font-weight:700;box-shadow:inset 0 -2px 0 var(--ink)}
.tl-track{position:relative;height:34px;background:repeating-linear-gradient(90deg,transparent 0 27px,var(--ink-06) 27px 28px)}
.tl-bar{position:absolute;top:6px;height:22px;background:var(--ink);color:var(--paper);border-radius:4px;font-size:11px;line-height:22px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:24px}
.embed iframe{width:100%;border:1px solid var(--ink-10);border-radius:var(--radius);background:var(--ink-03)}
.embed-bar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-40);padding:4px 2px}
.embed-bar a{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-40)}
.blk.t-embed .body,.blk.t-toc .body,.blk.t-synced .body,.blk.t-columns .body{display:block}
.toc{border-left:2px solid var(--ink-10);padding:2px 0 2px 12px;display:flex;flex-direction:column;gap:2px}
.toc a{text-decoration:none;color:var(--ink-60);font-size:14px;transition:color var(--t)}.toc a:hover{color:var(--ink)}
.toc .toc-h2{padding-left:14px}.toc .toc-h3{padding-left:28px;font-size:13px}
.toc.empty-toc{color:var(--ink-40);font-size:13px}
.synced{border:1px solid var(--ink-10);border-radius:var(--radius);padding:8px 12px}
.synced-h{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-40);margin-bottom:4px}.synced-h svg{width:13px;height:13px}
.synced .blk{margin:0}.synced .blk .gut{display:none}
.cols{display:flex;gap:16px;align-items:flex-start;width:100%}
.col-wrap{flex:1;min-width:0;position:relative;padding-left:44px;margin-left:-44px}
.col-wrap .blocks{padding-top:0}
.col-wrap .col-x{position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:1px solid var(--ink-10);display:grid;place-items:center;opacity:0;transition:opacity var(--t)}
.col-wrap:hover .col-x{opacity:1}.col-x svg{width:11px;height:11px}
.col-add{flex:none;width:22px;align-self:stretch;border-radius:4px;color:var(--ink-40);opacity:0;transition:opacity var(--t),background var(--t);display:grid;place-items:center}
.cols:hover .col-add{opacity:1}.col-add:hover{background:var(--ink-06)}.col-add svg{width:14px;height:14px}
.audit .ha{cursor:default}
@media (max-width:860px){.cols{flex-direction:column}.col-wrap{padding-left:20px;margin-left:-20px}.tl-label{width:120px}}

/* ---------- brand ---------- */
.sb-head .ws .logo{height:38px;width:auto;display:block}
.sb-head{padding:12px 8px 8px}
.hist-head .ht.on{font-weight:500}

/* ---------- brand palette（ロゴのトーン） ---------- */
::selection{background:var(--accent-20)}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{opacity:.9}
.item.active{background:var(--accent-10);color:var(--ink)}
.sb-head .ws{padding:4px}
.db-bar .vt.active{border-bottom-color:var(--accent)}
.db-bar .tb.on{color:var(--accent)}
.txt a,.file-card .fn,.blk.t-bookmark .body a .fn{color:var(--accent)}
.txt a{text-decoration-color:var(--accent-20)}
.mention,a.mention{background:var(--accent-10);color:var(--accent);border-bottom:0}
.mention.user{background:var(--accent-10);color:var(--accent)}
.blk .cb.on,.cb-cell.on{background:var(--accent);border-color:var(--accent)}
.blk .cb,.cb-cell{border-color:var(--ink-40)}
.blk.t-quote .body{border-left-color:var(--accent)}
.blk.t-callout .body{background:var(--sky);border-color:transparent}
:root[data-theme="dark"] .blk.t-callout .body,.blk.t-callout .body:where(:root:not([data-theme="light"]) *){background:var(--accent-10)}
.tag{background:var(--sky);border-color:transparent;color:var(--navy)}
:root[data-theme="dark"] .tag{background:var(--accent-10);color:var(--ink)}
.tag.rel{color:var(--accent)}
.ib.on{color:var(--accent);background:var(--accent-10)}
.ib.on svg{stroke:var(--accent)}
.top .ib[title="お気に入り"].on{color:var(--yellow);background:rgba(247,189,0,.14)}
.top .ib[title="お気に入り"].on svg{fill:var(--yellow);stroke:var(--yellow)}
.bell .cnt{background:var(--pink)}
.kbd{border-color:var(--ink-20)}
.inline-bar{background:var(--navy)}
.snap-bar{background:var(--navy)}
.blocks.ro .blk.diff-add{border-left-color:var(--accent);background:var(--accent-10)}
.blocks.ro .blk.diff-mod{border-left-color:var(--yellow);background:rgba(247,189,0,.1)}
.blocks.ro .blk.diff-del{border-left-color:var(--pink)}
.snap-bar .lg.add{background:var(--accent)}.snap-bar .lg.mod{border-color:var(--yellow);background:transparent}.snap-bar .lg.del{background:var(--pink)}
.ha .dif s{color:var(--pink)}
.ha .dif{border-left-color:var(--accent-20)}
.hv.cur .cur-tag,.cur-tag{background:var(--accent)}
.hist-head .ht.on{background:var(--accent-10);color:var(--accent)}
.blk.has-c::after{border-color:var(--yellow);background:rgba(247,189,0,.14);color:var(--navy)}
.thread.resolved{opacity:.5}
.tl-bar{background:var(--accent)}
.tl-day.today{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.cal-cell.today .cal-d{color:var(--accent)}
.cal-ev{border-color:var(--accent-20);background:var(--sky)}:root[data-theme="dark"] .cal-ev{background:var(--accent-10)}
.cal-ev:hover{border-color:var(--accent)}
.card:hover{border-color:var(--accent)}
.col.over{outline-color:var(--accent-20)}
.dbt td .cell:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.tb td [contenteditable]:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.prop-row .pv:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.pop input.f:focus,.add-row .f:focus,.prof input.f:focus,.composer textarea:focus,.modal .q:focus{border-color:var(--accent)}
.drop-zone:hover,.drop-zone.over{border-color:var(--accent);background:var(--accent-10)}
.item.drop-in{box-shadow:inset 0 0 0 1.5px var(--accent)}
.item.drop-before{box-shadow:inset 0 2px 0 var(--accent)}.item.drop-after{box-shadow:inset 0 -2px 0 var(--accent)}
.blk.drop-before::before,.blk.drop-after::after{background:var(--accent)}
.swatches button.on{box-shadow:0 0 0 2px var(--accent)}
.pop .mi.danger{color:var(--pink)}
.btn.sm:hover{border-color:var(--accent);color:var(--accent)}
.title.remote{box-shadow:inset 3px 0 0 var(--pc,var(--accent))}
.sb-sec{color:var(--ink-40)}
.gbtn{border-color:var(--accent-20)}.gbtn:hover{background:var(--accent-10)}
.share-btn{border-color:var(--accent-20);color:var(--accent)}.share-btn:hover{background:var(--accent-10)}
.chip:hover{color:var(--accent)}
.head-act button:hover{color:var(--accent)}
.toc a:hover{color:var(--accent)}
.toc{border-left-color:var(--accent-20)}
.synced{border-color:var(--accent-20)}
.c-quote{border-left-color:var(--yellow)}

/* ---------- spacing pass（8px グリッドで余白を統一） ---------- */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px}
/* サイドバー */
.sb-head{padding:var(--s3) var(--s2) var(--s2);gap:var(--s1)}
.sb-head .ws{gap:var(--s2);padding:var(--s1) var(--s2)}
.sb-nav{padding:0 var(--s2);display:flex;flex-direction:column;gap:2px}
.sb-scroll{padding:0 var(--s2) var(--s5)}
.sb-sec{padding:var(--s4) var(--s2) var(--s1)}
.sb-sec:first-child{padding-top:var(--s2)}
.item{height:30px;padding:0 var(--s2) 0 var(--s1);gap:6px}
.tree .tree{margin-left:var(--s4)}
.sb-foot{padding:var(--s2);display:flex;flex-direction:column;gap:2px}
/* トップバー */
.top{height:48px;padding:0 var(--s3) 0 var(--s4);gap:var(--s1)}
.top .crumbs{gap:2px;margin-right:var(--s2)}
.top .crumb{padding:3px var(--s2)}
.top .meta{margin:0 var(--s2)}
.top .ib{width:30px;height:30px}
.top .share-btn{margin:0 var(--s1);padding:5px var(--s3)}
.presence-bar{margin-right:var(--s2)}
/* ページ本文 */
.page{padding:0 var(--s7) 40vh}
.head{padding-top:var(--s7)}
.head.has-cover{padding-top:var(--s5)}
.cover{height:220px}
.icon-big{margin-top:-52px;margin-bottom:var(--s2)}
.head-act{margin-bottom:var(--s2);gap:var(--s1)}
.title{margin:0 0 var(--s1)}
.backlinks{margin:var(--s1) 0 var(--s3)}
.ro-note{margin:0 0 var(--s3)}
.props{margin:var(--s2) 0 var(--s4);padding-bottom:var(--s4)}
.blocks{padding-top:var(--s2)}
.blk{margin:2px 0}
.blk .body{padding:3px 2px}
.blk.t-h1{margin-top:var(--s6)}.blk.t-h2{margin-top:var(--s5)}.blk.t-h3{margin-top:var(--s4)}
.blk.t-h1 .txt,.blk.t-h2 .txt,.blk.t-h3 .txt{padding-bottom:2px}
.blk.t-quote .body,.blk.t-callout .body,.blk.t-code .body{margin:var(--s2) 0}
.blk.t-callout .body{padding:var(--s4) var(--s4) var(--s4) var(--s3)}
.blk.t-code .txt{padding:var(--s3) var(--s4)}
.blk.t-divider .body{padding:var(--s3) 0}
.blk.t-image .body,.blk.t-file .body,.blk.t-bookmark .body,.blk.t-embed .body{padding:var(--s2) 2px}
.blk.t-table .body{padding:var(--s2) 0}
.tbl-wrap{padding:0 28px 28px 0}
.cols{gap:var(--s5)}
.toc{padding:var(--s1) 0 var(--s1) var(--s3)}
.synced{padding:var(--s2) var(--s3) var(--s3)}
/* データベース */
.db-bar{margin-top:var(--s4);gap:var(--s1);row-gap:var(--s1);padding-bottom:0}
.db-bar .vt{padding:var(--s2) var(--s3);gap:6px}
.db-bar .sp{min-width:var(--s4)}
.db-bar .tb{padding:5px var(--s2)}
.db-bar .btn.pri{margin-left:var(--s2);padding:5px var(--s4)}
.db-wrap{margin-top:var(--s2);padding-bottom:var(--s4)}
.dbt th .hc{padding:var(--s2) var(--s2)}
.dbt td .cell{padding:var(--s2) var(--s2);min-height:38px}
.board{gap:var(--s4);padding:var(--s4) 0 var(--s5)}
.col .ch{padding:0 var(--s1) var(--s2)}
.card{padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.list .li{padding:var(--s2) var(--s2)}
.gal{gap:var(--s4);padding:var(--s4) 0}
.grouped .grp-h{padding:var(--s4) var(--s1) var(--s2)}
.cal{margin-top:var(--s4)}.cal-h{margin-bottom:var(--s3)}
.tl{margin-top:var(--s4)}
.prop-row .pn{padding:6px var(--s2)}.prop-row .pv{padding:6px var(--s2)}
/* 右パネル（履歴・コメント） */
.hist{width:340px}
.hist-head{padding:var(--s2) var(--s3);min-height:48px}
.hist-body{padding:var(--s2) var(--s3) var(--s5)}
.hday{padding:var(--s4) var(--s2) var(--s1)}
.hv,.ha{padding:var(--s2);gap:var(--s3)}
.cpanel .c-target{padding:var(--s2) var(--s3);margin:var(--s1) 0 var(--s3)}
.thread{padding:var(--s3) var(--s1)}
.cm{gap:var(--s2);margin:var(--s1) 0}
.composer{margin:var(--s2) 0 var(--s3);gap:var(--s2)}
.composer textarea{padding:var(--s2) var(--s3)}
.c-actions{margin-top:var(--s2);gap:var(--s1)}
.reply{margin-left:var(--s6);padding-left:var(--s2)}
/* ピーク・モーダル・ポップオーバー */
.peek .scroll .page{padding:0 var(--s7) 30vh}
.peek .head{padding-top:var(--s6)}
.modal .body{padding:var(--s5)}
.modal .body h3{margin:0 0 var(--s3)}
.modal .body .btns{margin-top:var(--s5);gap:var(--s2)}
.modal .q{padding:var(--s4) var(--s5)}
.modal .res{padding:var(--s2)}
.pop{padding:var(--s2) 6px}
.pop .mi{padding:7px var(--s2);gap:var(--s3)}
.pop .ph{padding:var(--s2) var(--s2) var(--s1)}
.pop hr{margin:6px 0}
.add-row{margin-bottom:var(--s5);gap:var(--s2)}
.members td,.members th{padding:var(--s2) var(--s3)}
.prof .prof-row{margin:var(--s2) 0 var(--s4);gap:var(--s5)}
.inline-bar{padding:var(--s1);gap:2px}
.trash-list .tr{padding:var(--s3) var(--s2);gap:var(--s3)}
.snap-bar{padding:var(--s2) var(--s4);gap:var(--s4)}
@media (max-width:860px){.page,.page.wide,.peek .scroll .page{padding-left:var(--s5);padding-right:var(--s5)}.blk .gut{margin-left:-24px;width:24px}.head{padding-top:var(--s6)}.top{padding:0 var(--s2) 0 var(--s2)}.hist{width:min(340px,100vw)}}
.head{padding-top:80px}
.icon-big{margin-top:-56px}
.head.has-cover{padding-top:var(--s5)}
.head.has-cover .icon-big{margin-top:-64px}
@media (max-width:860px){
  .top .meta{display:none}
  .top .share-btn{padding:4px var(--s2)}
  .head{padding-top:72px}
  .icon-big{font-size:56px;height:64px;margin-top:-48px}
  .title{font-size:28px}
  .blk.h-c::after{right:-20px}
}

/* ---------- line-height（本文は和文向けに 1.7、UI は 1.5、見出しは詰める） ---------- */
body{line-height:1.5}
.blk .txt{line-height:1.7}
.blk .mk{line-height:calc(15px * 1.7)}
.blk.t-h1 .txt{line-height:1.3}.blk.t-h2 .txt{line-height:1.35}.blk.t-h3 .txt{line-height:1.4}
.title{line-height:1.25}
.blk.t-code .txt{line-height:1.65}
.blk.t-callout .txt,.blk.t-quote .txt{line-height:1.7}
.blk .cb{margin-top:1px}
.tb td [contenteditable]{line-height:1.6}
.dbt td .cell,.prop-row .pv{line-height:1.6}
.card .ct{line-height:1.5}.card .cp{line-height:1.5}
.item,.pop .mi,.db-bar .vt,.db-bar .tb,.btn,.tag{line-height:1.5}
.pop .mi .d small{line-height:1.4}
.cm .ctext,.ha .ln,.hv .ln,.ha .dif{line-height:1.6}
.note,.ro-note,.c-quote{line-height:1.6}
.modal .body p,.modal .body{line-height:1.6}
.blocks.ro .txt{line-height:1.7}
.toc a{line-height:1.7}
.sb-sec,.hday{line-height:1.4}
.blk.t-image .cap,.embed-bar{line-height:1.5}
.sb-backdrop{position:fixed;inset:0;background:rgba(11,31,77,.25);z-index:29}

/* サイズ指定のない SVG アイコン（DB 表のプロパティ追加、ツリーの開閉矢印） */
.dbt th .hc svg{width:16px;height:16px;stroke-width:1.5;display:block}
.item .tw svg{width:14px;height:14px;display:block}
/* 画像ブロック: ドラッグでサイズ変更 */
.img-wrap{position:relative;display:inline-block;max-width:100%;vertical-align:top}
.img-wrap .rs{position:absolute;top:50%;width:6px;height:48px;max-height:50%;transform:translateY(-50%);border-radius:3px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.85);opacity:0;cursor:ew-resize;transition:opacity var(--t);touch-action:none}
.img-wrap .rs-l{left:6px}.img-wrap .rs-r{right:6px}
.img-wrap:hover .rs,.img-wrap.resizing .rs{opacity:1}
.img-wrap.resizing img{pointer-events:none}
.page.ro .img-wrap .rs{display:none}
/* カバーピッカーのアップロードボタン */
.pop .cover-up{padding:4px 8px}
.pop .cover-up .btn{width:100%;justify-content:center}
/* テーブルブロック: 横スクロールのみ。overflow-x だけ指定すると縦も auto になり、横スクロールバーの分だけ縦にもスクロールバーが出るため縦は hidden にする */
.tbl-wrap,.db-wrap{overflow-x:auto;overflow-y:hidden}
/* 列レイアウトのセル内では列幅が狭いので、セルの最小幅を縮めて横スクロールが出にくくする */
.col-wrap .tb td{min-width:48px}
/* カバー画像の位置調整モード */
.cover.repos{cursor:ns-resize;user-select:none;touch-action:none}
.cover.repos .cover-act{opacity:1}
.cover .repos-hint{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.25);font-size:13px;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.4)}