:root {
  --bg: #fbfaf8;
  --panel: #f3f1ed;
  --line: #e2ded7;
  --text: #22201c;
  --muted: #77726a;
  --accent: #2f6f4f;
  --accent-soft: #e2efe7;
  --danger: #b3261e;
  --sel: #fff;
  --code: #efece6;
  --shadow: 0 1px 2px rgb(0 0 0 / .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1a18;
    --panel: #232220;
    --line: #36332f;
    --text: #e9e6e1;
    --muted: #9b958c;
    --accent: #7cc49b;
    --accent-soft: #24382c;
    --danger: #f08b82;
    --sel: #2d2b28;
    --code: #2a2825;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.6 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea { background: transparent; border: 0; outline: 0; }

#app { display: grid; grid-template-columns: 220px 320px 1fr; height: 100vh; height: 100dvh; }

/* sidebar */
#sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; padding: 14px 10px; gap: 6px; }
.brand { font-weight: 700; font-size: 16px; padding: 0 8px 8px; letter-spacing: .02em; }
.filters { display: flex; flex-direction: column; }
.filter, #tag-list button.tag { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; padding: 5px 8px; border-radius: 6px; }
.filter:hover, #tag-list button.tag:hover { background: var(--line); }
.filter.on, #tag-list li.on button.tag { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.count { color: var(--muted); font-size: 12px; font-weight: 400; }
.tag-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 8px 2px; color: var(--muted); font-size: 12px; }
.small-input { margin: 2px 4px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: var(--bg); }
#tag-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0; }
#tag-list li { position: relative; }
#tag-list li .tag-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tag-list .tag-actions { position: absolute; right: 4px; top: 3px; display: none; gap: 2px; background: var(--line); border-radius: 4px; }
#tag-list li:hover .tag-actions { display: flex; }
#tag-list li:hover .count { visibility: hidden; }
.tag-actions button { padding: 1px 5px; font-size: 12px; color: var(--muted); }
.tag-actions button:hover { color: var(--text); }
.side-foot { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-top: 1px solid var(--line); font-size: 12px; }
.side-foot small { color: var(--muted); }
.bm { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--accent); color: var(--bg) !important; text-decoration: none; font-weight: 600; width: fit-content; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { padding: 1px 8px; font-size: 12px; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--bg); }

/* list */
#list-pane { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.list-head { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
#search { flex: 1; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sel); }
.primary { background: var(--accent); color: var(--bg); padding: 6px 12px; border-radius: 8px; font-weight: 600; white-space: nowrap; }
#list-opts { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
#list-opts select { flex: 1; min-width: 0; font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--sel); color: var(--text); }
#trash-note { padding: 6px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--panel); }
mark { background: #ffe58a; color: inherit; border-radius: 2px; padding: 0 1px; }
@media (prefers-color-scheme: dark) { mark { background: #6b5a14; } }
.n-left { color: var(--danger); }
#active-filter { padding: 6px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
#active-filter:empty { display: none; }
#note-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
#note-list li { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
#note-list li:hover { background: var(--panel); }
#note-list li.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.n-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-title.untitled { color: var(--muted); font-weight: 400; }
.n-snip { color: var(--muted); font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0; }
.n-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; line-height: 1.7; }
.chip button { color: inherit; opacity: .6; font-size: 12px; }
.chip button:hover { opacity: 1; }
.list-empty { padding: 30px 16px; color: var(--muted); text-align: center; }
#btn-more { margin: 8px auto; }

/* editor */
#editor-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.empty { margin: auto; color: var(--muted); }
#editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.ed-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.spacer { flex: 1; }
.icon { font-size: 15px; padding: 3px 7px; border-radius: 6px; }
.icon:hover { background: var(--panel); }
.icon.on { background: var(--accent-soft); }
#save-status { font-size: 12px; color: var(--muted); }
.plain { color: var(--accent); padding: 3px 6px; text-decoration: none; }
.danger-plain { color: var(--danger); padding: 3px 6px; }
#title { font-size: 22px; font-weight: 700; padding: 14px 24px 4px; }
#tag-editor { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 2px 24px 6px; }
#tag-chips { display: contents; }
#tag-input { flex: 1; min-width: 140px; font-size: 13px; padding: 2px 0; }
#meta { padding: 0 24px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#meta a { color: var(--accent); }
#fmt-bar { display: flex; align-items: center; gap: 2px; padding: 4px 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
#fmt-bar::-webkit-scrollbar { display: none; }
#fmt-bar button { min-width: 32px; height: 30px; padding: 0 6px; border-radius: 6px; font-size: 14px; color: var(--text); flex: none; }
#fmt-bar button:hover, #fmt-bar button:active { background: var(--panel); }
#fmt-bar .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; flex: none; }
#editor[data-v="preview"] #fmt-bar { display: none; }
#panes { flex: 1; display: grid; min-height: 0; }
#panes[data-v="edit"] { grid-template-columns: 1fr; }
#panes[data-v="edit"] #preview { display: none; }
#panes[data-v="preview"] { grid-template-columns: 1fr; }
#panes[data-v="preview"] #body { display: none; }
#panes[data-v="split"] { grid-template-columns: 1fr 1fr; }
#panes[data-v="split"] #body { border-right: 1px solid var(--line); }
#body { resize: none; padding: 16px 24px 40vh; font: 14px/1.75 ui-monospace, "Cascadia Code", "BIZ UDGothic", "MS Gothic", monospace; overflow: auto; min-height: 0; }
#preview { padding: 16px 24px 40vh; overflow: auto; min-height: 0; }
#panes[data-v="preview"] #preview { cursor: text; }
.preview-empty { color: var(--muted); }
#attachments { border-top: 1px solid var(--line); padding: 6px 24px; font-size: 13px; max-height: 30vh; overflow: auto; }
#att-list { list-style: none; padding: 0; margin: 4px 0; }
#att-list li { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
#att-list a { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#att-list .size { color: var(--muted); font-size: 12px; }

/* markdown */
.md { overflow-wrap: anywhere; }
.md h1, .md h2, .md h3 { line-height: 1.3; margin: 1.2em 0 .5em; }
.md h1 { font-size: 1.6em; } .md h2 { font-size: 1.3em; } .md h3 { font-size: 1.1em; }
.md img, .md video { max-width: 100%; height: auto; border-radius: 6px; }
.md a { color: var(--accent); }
.md code { background: var(--code); padding: .1em .35em; border-radius: 4px; font-size: .92em; }
.md pre { background: var(--code); padding: 12px; border-radius: 8px; overflow: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 0; padding: 0 1em; border-left: 3px solid var(--line); color: var(--muted); }
.md table { border-collapse: collapse; display: block; overflow: auto; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 8px; }
.md hr { border: 0; border-top: 1px solid var(--line); }
.md li input[type=checkbox] { margin-right: 6px; }

/* 編集履歴 */
#history { width: min(900px, calc(100vw - 24px)); height: min(640px, 86dvh); border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 0; }
#history[open] { display: flex; flex-direction: column; }
#history::backdrop { background: rgb(0 0 0 / .45); }
.hist-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px 1fr; border-top: 1px solid var(--line); }
#hist-list { list-style: none; margin: 0; padding: 0; overflow: auto; border-right: 1px solid var(--line); }
#hist-list li { padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
#hist-list li:hover { background: var(--panel); }
#hist-list li.on { background: var(--accent-soft); }
#hist-list .when { font-weight: 600; font-size: 13px; }
#hist-list .head { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hist-view { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.hist-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
#hist-preview { flex: 1; overflow: auto; padding: 12px 16px; }
@media (max-width: 760px) {
  #history { width: calc(100vw - 16px); height: 90dvh; }
  .hist-wrap { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; }
  #hist-list { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* Markdown 早見表 */
#md-help { width: min(720px, calc(100vw - 24px)); max-height: 86dvh; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); padding: 0; overflow: auto; }
#md-help::backdrop { background: rgb(0 0 0 / .45); }
.help-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.help-note { margin: 10px 16px; color: var(--muted); font-size: 12.5px; }
.help-table { width: calc(100% - 32px); margin: 0 16px 12px; border-collapse: collapse; }
.help-table th, .help-table td { border-bottom: 1px solid var(--line); padding: 8px 6px; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.help-table code { white-space: pre-wrap; }
.help-table table { max-width: 100%; }
.help-table th { font-size: 12px; color: var(--muted); font-weight: 600; }
.help-table td:first-child { width: 44%; }
.help-table td:last-child { width: 64px; text-align: right; white-space: nowrap; }
.help-table code { background: var(--code); padding: .1em .35em; border-radius: 4px; font-size: 12.5px; display: inline-block; line-height: 1.7; }
@media (max-width: 760px) {
  #md-help { width: calc(100vw - 16px); }
  .help-table td:first-child { width: 48%; }
  .help-table td, .help-table th { padding: 8px 4px; font-size: 13px; }
  .help-table td:last-child { width: 56px; }
  .help-table td:last-child .plain { font-size: 12px; padding: 3px 2px; }
}

#drop-hint { position: fixed; inset: 0; display: grid; place-items: center; background: rgb(47 111 79 / .15); border: 3px dashed var(--accent); font-size: 20px; font-weight: 700; color: var(--accent); pointer-events: none; z-index: 20; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 8px 16px; border-radius: 8px; z-index: 30; max-width: calc(100vw - 32px); }

.only-mobile { display: none; }
#scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .35); z-index: 9; }
@media (min-width: 761px) { #scrim { display: none !important; } }

@media (max-width: 1000px) {
  #app { grid-template-columns: 180px 260px 1fr; }
  #panes[data-v="split"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  #panes[data-v="split"] #body { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
}
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; }
  .only-mobile { display: inline-block; }
  #sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(200px, 62vw); z-index: 10; transform: translateX(-105%); transition: transform .2s; box-shadow: 4px 0 20px rgb(0 0 0 / .2); touch-action: pan-y; }
  #app.menu-open #sidebar.dragging { transition: none; }
  /* 新規ボタンは左上（右端で見切れるため） */
  .list-head { align-items: center; }
  #btn-menu { order: 1; }
  .list-head .primary { order: 2; padding: 6px 10px; }
  #search { order: 3; flex: 1 1 auto; min-width: 0; }
  #app.menu-open #sidebar { transform: none; }
  #app[data-view="list"] #editor-pane { display: none; }
  #app[data-view="editor"] #list-pane { display: none; }
  #title { padding: 12px 16px 4px; }
  #tag-editor, #meta { padding-left: 16px; padding-right: 16px; }
  #body, #preview { padding: 12px 16px 40vh; font-size: 15px; }
  .ed-toolbar { padding: 6px 10px; gap: 2px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ed-toolbar::-webkit-scrollbar { display: none; }
  .ed-toolbar > * { flex: none; }
  .ed-toolbar .spacer { flex: 1 1 0; min-width: 0; }
  .ed-toolbar .icon { padding: 3px 5px; }
  #save-status { font-size: 11px; }
  #btn-delete .lbl { display: none; }
  #btn-delete::before { content: '🗑'; font-size: 15px; }
  #fmt-bar { padding: 4px 8px; }
  #fmt-bar button { min-width: 38px; height: 36px; font-size: 16px; }
}