/* エディター専用。公開記事の共通スタイルには影響しない。 */
body:has(.writing-app) { background: #f5f6f5; }
.blog-shell:has(.writing-app) { width: min(1320px, calc(100% - 48px)); padding: 28px 0 64px; }
.writing-app { --writing-green: #087d68; --writing-border: #e4e8e5; color: #242d29; color-scheme: light; }
.writing-app [hidden] { display: none !important; }
.writing-app :is(button, input, textarea, select) { font-family: inherit; }
.writing-app button { cursor: pointer; }
.writing-app button:disabled { cursor: default; opacity: .35; }
.writing-app :is(button, input, select, textarea, summary):focus-visible { outline: 3px solid #77bbae; outline-offset: 3px; }
.writing-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.writing-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.writing-heading { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 18px; }
.writing-eyebrow { flex-basis: 100%; margin: 0 0 5px; color: var(--writing-green); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.writing-heading h1 { margin: 0; font-size: 25px; letter-spacing: .03em; line-height: 1.5; }
.save-indicator { color: #6a776f; font-size: 12px; }
.save-indicator::before { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #6aa28b; content: ''; }
.save-indicator[data-state="error"] { color: #ae3547; }
.save-indicator[data-state="error"]::before { background: currentColor; }
.writing-actions, .dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.writing-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; padding: 9px 17px; border: 1px solid #d8dfda; border-radius: 7px; color: #34453c; background: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.writing-button:hover { background: #edf4f0; border-color: #8bafa0; }
.writing-button.primary { color: white; border-color: var(--writing-green); background: var(--writing-green); }
.writing-button.primary:hover { background: #066651; }
.writing-button.quiet { border-color: transparent; background: transparent; }
.writing-button.danger { color: #ae3547; }
.writing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; gap: 24px; }
.manuscript { min-width: 0; border: 1px solid var(--writing-border); border-radius: 10px; background: white; box-shadow: 0 3px 16px #28372b04; }
.writing-mode-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--writing-border); }
.mode-switch { display: inline-flex; padding: 3px; border-radius: 6px; background: #f1f4f2; }
.mode-switch button { padding: 5px 14px; border: 0; border-radius: 4px; background: transparent; color: #727d76; font-size: 12px; font-weight: 700; }
.mode-switch button[aria-pressed="true"] { color: #294e3e; background: white; box-shadow: 0 1px 4px #0000000d; }
.writing-count { color: #78827b; font-size: 11px; white-space: nowrap; }
.writing-count strong { color: #405b4c; font-weight: 600; }
.count-divider { margin: 0 8px; color: #ccd3cd; }
/* A compact, light toolbar belongs to the manuscript, beside the article settings. */
.writing-toolbar { display: block; min-width: 0; position: sticky; top: var(--blog-header-height, 75px); z-index: 9; border-bottom: 1px solid #dfe7e3; background: #fff; color: #43564c; box-shadow: 0 4px 9px #25382d05; }
.format-toolbar { width: 100%; min-width: 0; padding: 7px 10px; }
.toolbar-row { display: flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #bdcfc6 #f7faf8; }
.toolbar-row + .toolbar-row { margin-top: 5px; padding-top: 5px; border-top: 1px solid #f0f3f1; }
.tool-group { display: flex; flex-shrink: 0; align-items: center; gap: 3px; padding-right: 8px; border-right: 1px solid #e5ebe7; }
.tool-group:last-child { border-right: 0; padding-right: 0; }
.writing-toolbar button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 2px; min-width: 32px; height: 34px; padding: 5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #4b5e53; font-size: 15px; line-height: 1; white-space: nowrap; }
.writing-toolbar button:hover, .writing-toolbar button[aria-pressed="true"], .writing-toolbar button[aria-expanded="true"] { color: #086f5c; background: #eaf5ef; border-color: #d5e8dc; }
.writing-toolbar button:disabled:hover { background: transparent; border-color: transparent; }
.writing-toolbar :is(button, input, select):focus-visible { outline: 2px solid #69a998; outline-offset: -2px; }
.writing-toolbar :where(select, input[type="number"]) { flex-shrink: 0; width: auto; min-width: 0; height: 32px; padding: 4px 7px; border: 1px solid #e2e9e5; border-radius: 6px; color: #43564c; background: #fff; font-size: 12px; line-height: 1.3; }
.writing-toolbar select option { background: #fff; color: #344c3e; }
.writing-toolbar #blockFormat { width: 89px; }
.writing-toolbar #fontFamily { width: 142px; }
.writing-toolbar #fontSize { width: 59px; appearance: textfield; }
.writing-toolbar #fontSize::-webkit-inner-spin-button { appearance: none; }
.writing-toolbar :is(#undoBtn, #redoBtn) { font-size: 22px; }
.writing-toolbar .labeled-tool { gap: 5px; padding-inline: 8px; font-size: 12px; }
.labeled-tool > span { font-size: 18px; }
.writing-toolbar .more-tools-button { margin-left: auto; padding-inline: 10px; color: #668174; background: #f5f8f6; }
.tool-sub, .writing-toolbar button > sub { align-self: flex-end; font-size: 10px; }
.tool-sup, .writing-toolbar button > sup { align-self: flex-start; font-size: 10px; }
.marker-icon { padding: 0 2px; background: linear-gradient(transparent 55%, var(--marker-color, #fff0a8) 55%); font-size: 13px; font-weight: 700; }
.color-split { display: flex; align-items: center; border: 1px solid #e2e9e5; border-radius: 6px; }
.writing-toolbar .color-apply { position: relative; border-radius: 5px 0 0 5px; }
.writing-toolbar .color-dropdown { min-width: 20px; width: 20px; padding-inline: 2px; border-left: 1px solid #e2e9e5; border-radius: 0 5px 5px 0; font-size: 13px; }
.color-apply.font-color { padding-bottom: 8px; }
.color-apply.font-color::after { position: absolute; bottom: 4px; left: 7px; right: 7px; height: 3px; border-radius: 2px; background: var(--swatch, #c42b37); content: ''; }
.color-palette { position: fixed; z-index: 12; width: 280px; max-width: calc(100vw - 16px); overflow-y: auto; padding: 12px 14px 16px; border: 1px solid #dce5df; border-radius: 10px; background: #fff; box-shadow: 0 8px 32px #223a2926; }
.color-palette-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; }
.writing-toolbar .color-palette-heading button { height: 26px; min-width: 26px; }
.color-swatches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.writing-toolbar .color-palette .color-swatch { min-width: 0; width: 100%; height: 26px; padding: 0; border: 1px solid #263e352b; border-radius: 4px; background: var(--color); }
.writing-toolbar .color-palette .color-swatch:is(:hover, [aria-pressed="true"]) { outline: 2px solid #087d68; outline-offset: 2px; }
.color-custom-label { display: block; margin: 16px 0 7px; color: #748379; font-size: 11px; }
.color-custom-row { display: flex; align-items: center; gap: 7px; }
.color-custom-row input { min-width: 0; height: 34px; padding: 5px 7px; border: 1px solid #dce5df; border-radius: 5px; color: #43564c; background: #fff; font-size: 12px; }
.color-custom-row input[type="color"] { flex-shrink: 0; width: 34px; padding: 2px; cursor: pointer; }
.color-custom-row input[type="text"] { flex: 1; width: 80px; font-family: monospace; }
.writing-toolbar .color-custom-row button { padding-inline: 10px; background: #eaf5ef; color: #086f5c; font-size: 12px; }
.color-error { margin: 9px 0 0; color: #ae3547; font-size: 11px; line-height: 1.6; }
.tool-color { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 34px; overflow: hidden; border: 1px solid #e2e9e5; border-radius: 6px; background: #fff; font-size: 16px; cursor: pointer; }
.tool-color input[type="color"] { width: 26px; height: 28px; min-height: 0; padding: 3px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.tool-color.paragraph-color { padding-bottom: 6px; }
.tool-color.paragraph-color input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; }
.tool-color.paragraph-color::after { position: absolute; bottom: 4px; left: 7px; right: 7px; height: 3px; border-radius: 2px; content: ''; pointer-events: none; }
.tool-color.paragraph-color::after { background: var(--swatch, #eef3f8); }
.tool-color:focus-within { outline: 2px solid #69a998; outline-offset: -2px; }
.more-formatting { display: grid; gap: 12px; max-height: 38vh; overflow-y: auto; padding: 15px 18px; border-top: 1px solid #dfe9e2; background: #f7faf8; }
.advanced-tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tool-group-label { min-width: 90px; font-size: 11px; color: #75887d; }
.tool-options { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tool-options > select { max-width: 165px; }
.alignment-icon { position: relative; display: block; width: 16px; height: 13px; border-block: 1px solid currentColor; }
.alignment-icon::before, .alignment-icon::after { position: absolute; top: 3px; left: 0; width: 11px; border-top: 1px solid currentColor; content: ''; }
.alignment-icon::after { top: 7px; width: 16px; }
.alignment-icon.center::before { left: 3px; width: 10px; }
.alignment-icon.right::before { right: 0; left: auto; }
.alignment-icon.justify::before { width: 16px; }
.rich-editor.show-marks :is(p, h2, h3, li, figcaption)::after { padding-left: 4px; color: #869b91; content: '¶'; font-size: 13px; font-weight: normal; }
.rich-editor.format-painting { cursor: crosshair; }
.rich-editor table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.rich-editor :is(td, th) { min-width: 32px; padding: 10px; border: 1px solid #cbd8d0; }
.rich-editor :is(td, th) > p { min-height: 1.5em; margin: 0; }
.writing-app .rich-editor pre { color: #345344; background: #f1f6f3; border-color: #dae6de; }
.table-dimensions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.table-header-option { display: flex; gap: 8px; align-items: center; font-size: 13px; }
/* Keep applied text/marker colors visible beneath the selection overlay. */
.rich-editor::selection, .rich-editor ::selection { background: #7bc2b14d; color: currentColor; }
::highlight(blog-editor-selection) { background-color: #7bc2b14d; color: currentColor; }
.editor-selection-overlay { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.editor-selection-overlay > span { position: absolute; background: #7bc2b15e; box-shadow: inset 0 -1px #37947d; }
@media (max-width: 800px) {
  .writing-toolbar .format-toolbar { padding: 6px; }
  .writing-toolbar button, .tool-color { min-width: 36px; height: 36px; }
  .writing-toolbar .color-dropdown { min-width: 28px; width: 28px; }
  .more-formatting { padding: 12px; max-height: 32vh; }
  .tool-group-label { flex-basis: 100%; }
}
.writing-paper { min-height: 750px; padding: 34px clamp(24px, 4.4vw, 66px) 52px; }
.cover-area { position: relative; margin: 0 0 32px; border-radius: 6px; }
.cover-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 116px; border: 1px dashed #dce3de; border-radius: 6px; background: #fafcfb; color: #7a887e; font-size: 12px; }
.cover-add:hover, .image-upload-zone:hover { background: #f0f7f3; border-color: #94baa3; color: #087d68; }
.cover-add > span { font-size: 20px; font-weight: 300; }
.cover-area > img { display: block; width: 100%; max-height: 330px; object-fit: cover; border-radius: 6px; }
.cover-area.has-cover .cover-add { position: absolute; bottom: 12px; left: 12px; width: auto; min-height: 36px; padding: 7px 12px; color: #3c5749; background: #ffffffed; }
.cover-remove { position: absolute; right: 12px; bottom: 12px; min-height: 36px; font-size: 11px; background: #ffffffed; }
.article-title-input { display: block; width: 100%; min-height: 56px; padding: 0; overflow: hidden; resize: none; color: #24372c; background: transparent; border: 0; font-size: clamp(26px, 3vw, 35px); font-weight: 800; line-height: 1.5; }
.article-title-input::placeholder { color: #b6bfb9; }
.article-title-input:focus { outline: 0; }
.writing-hint { margin: 12px 0; color: #7b8980; font-size: 11px; line-height: 1.8; }
.rich-editor.article-body { position: relative; min-height: 370px; padding: 14px 0 0; outline: 0; overflow-wrap: anywhere; line-height: 1.95; caret-color: #087d68; }
.rich-editor.article-body:focus-visible { box-shadow: -3px 0 #e7f2ec; }
.rich-editor[data-empty="true"]::before { position: absolute; color: #a9b3ac; content: attr(data-placeholder); pointer-events: none; }
.rich-editor.article-body :is(p, li) { font-size: 16px; }
.rich-editor.article-body > p { margin: 0 0 22px; }
.rich-editor figure { margin: 28px 0; }
.rich-editor figure img { cursor: pointer; }
.rich-editor [data-selected] { outline: 2px solid #77bbae; outline-offset: 5px; }
.rich-editor figcaption:empty::before { color: #a3aea6; content: 'キャプションを入力（任意）'; }
.rich-editor figcaption { min-height: 1.6em; outline: 0; }
.rich-editor .embed { cursor: pointer; }
.rich-editor .embed iframe { pointer-events: none; }
.rich-editor hr { margin: 36px auto; border: 0; border-top: 1px solid #dce3de; }
.writing-app .is-dragging { background: #eaf6ef; outline: 2px dashed #6faa91; outline-offset: -4px; }
.paper-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--writing-border); color: #7a897e; font-size: 10px; }
.writing-sidebar { display: grid; gap: 15px; min-width: 0; }
.settings-card { border: 1px solid var(--writing-border); border-radius: 8px; background: #fff; }
.settings-card > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 15px 17px; color: #3b4d41; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.settings-card > summary::-webkit-details-marker { display: none; }
.settings-card > summary::after { margin-left: auto; content: '+'; font-size: 15px; font-weight: 400; color: #8b9a8f; }
.settings-card[open] > summary::after { content: '−'; }
.settings-card > summary > span { margin-left: 4px; color: #7a887f; font-size: 10px; font-weight: 400; }
.settings-content { padding: 0 17px 18px; }
.writing-app .field { margin-bottom: 16px; gap: 6px; }
.writing-app .field:last-child { margin-bottom: 0; }
.writing-app .field label { display: flex; justify-content: space-between; gap: 8px; color: #65766a; font-size: 11px; font-weight: 600; }
.writing-app .field label span { color: #829087; font-size: 10px; font-weight: 400; }
.writing-app .field :is(input, textarea) { min-width: 0; min-height: 38px; padding: 9px 10px; border-color: #e0e6e1; border-radius: 5px; font-size: 12px; line-height: 1.6; }
.writing-app .field textarea { min-height: 82px; }
.writing-app .field small { color: #7c8c81; font-size: 10px; overflow-wrap: anywhere; }
.advanced-settings { margin-top: 18px; border-top: 1px solid var(--writing-border); padding-top: 12px; }
.advanced-settings > summary { margin-bottom: 10px; color: #77867b; cursor: pointer; font-size: 11px; }
.image-upload-zone { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; width: 100%; padding: 14px; border: 1px dashed #dce3de; border-radius: 5px; background: #fafcfb; color: #708875; font-size: 12px; }
.image-upload-zone > span { font-size: 17px; }
.image-upload-zone small { flex-basis: 100%; margin-top: 3px; color: #819087; font-size: 10px; }
.image-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-height: 400px; overflow-y: auto; margin-top: 12px; }
.library-item { min-width: 0; }
.library-image { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--writing-border); border-radius: 5px; background: #f8faf9; }
.library-image img { display: block; width: 100%; height: 82px; object-fit: cover; }
.library-item > span { display: block; margin-top: 3px; color: #89978c; font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.library-actions { display: flex; gap: 6px; }
.library-actions button { padding: 3px 0; border: 0; background: none; color: #65816e; font-size: 10px; }
.library-actions button:last-child { margin-left: auto; color: #9f8589; }
.article-outline { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.article-outline button { padding: 2px 0; text-align: left; border: 0; background: none; color: #597564; font-size: 12px; line-height: 1.7; }
.article-outline .subheading { padding-left: 14px; font-size: 11px; color: #7d8c81; }
.draft-note { display: flex; gap: 10px; padding: 8px 4px; color: #6d8474; font-size: 11px; }
.draft-dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: #a9c8b4; }
.draft-note p { margin: 5px 0; color: #829087; font-size: 10px; }
.draft-note button { border: 0; padding: 3px 10px 0 0; background: none; color: #65816e; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.media-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 14px 20px; background: #eff7f2; border-bottom: 1px solid #d3e6da; }
.media-tools label { flex: 1; display: grid; gap: 3px; color: #58705f; font-size: 11px; }
.media-tools :is(input, select) { width: 100%; min-width: 100px; padding: 7px; border: 1px solid #cbdccf; border-radius: 4px; background: white; color: #3c5847; }
.source-panel { padding: 26px; }
.source-panel > label { font-size: 13px; font-weight: 700; }
.source-panel > textarea { width: 100%; min-height: 650px; padding: 18px; resize: vertical; border: 1px solid #e0e6e1; border-radius: 6px; background: #f9fbfa; color: #365e46; font: 13px/1.8 Consolas, monospace; tab-size: 2; }
.preview-notice { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 20px; color: #577864; background: #eff7f2; font-size: 12px; }
.preview-notice span { color: #708b7b; font-size: 11px; }
.reading-preview .article { border: 0; border-radius: 0; box-shadow: none; }
.reading-preview :is(.article-head h1, .article-body) { overflow-wrap: anywhere; }
.reading-preview figure { margin-left: 0; margin-right: 0; }
.writing-dialog { width: min(530px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 28px; overflow-y: auto; border: 1px solid #dce6df; border-radius: 12px; color: #344d3e; box-shadow: 0 30px 100px #1e392733; }
.writing-dialog::backdrop { background: #18332355; backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.dialog-heading h2 { margin: 0; font-size: 22px; }
.dialog-close { min-width: 32px; height: 32px; border: 0; border-radius: 5px; background: #f1f5f2; color: #71907c; font-size: 22px; }
.dialog-actions { justify-content: flex-end; margin-top: 20px; }
.dialog-actions.vertical { align-items: stretch; flex-direction: column; }
.dialog-error, .export-status { color: #a3424e; font-size: 12px; overflow-wrap: anywhere; }
.export-status { color: #476e55; }
.writing-app .import-source { min-height: 180px; font-family: Consolas, monospace; }
.export-checks { display: grid; gap: 8px; list-style: none; padding: 16px 0; font-size: 12px; }
.export-checks li::before { display: inline-block; width: 22px; color: #409773; content: '✓'; }
.export-checks li.warn::before { color: #b18a42; content: '○'; }
.export-destination { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--writing-border); border-radius: 6px; background: #f7faf8; font-size: 11px; }
.export-destination span { color: #8a9a8f; }
.export-destination code { color: #62856d; overflow-wrap: anywhere; }
.app-status { position: fixed; bottom: 24px; left: 50%; z-index: 30; max-width: min(600px, calc(100% - 32px)); transform: translateX(-50%); margin: 0; padding: 12px 20px; border-radius: 8px; background: #244d3d; color: white; box-shadow: 0 4px 20px #19352420; font-size: 12px; }
.app-status:empty { display: none; }
.editor-context-menu { position: fixed; z-index: 100; width: 260px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; border: 1px solid #d8e4dc; border-radius: 9px; background: #fff; box-shadow: 0 12px 45px #1738232e; }
.editor-context-menu button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 6px 10px; color: #36533f; border: 0; border-radius: 4px; background: none; font-size: 12px; text-align: left; }
.editor-context-menu button:not(:disabled):is(:hover, :focus-visible) { background: #eaf5ee; outline-offset: -2px; }
.editor-context-menu kbd { color: #8a998d; font: 10px/1.5 inherit; }
.editor-context-menu hr { margin: 5px 6px; border: 0; border-top: 1px solid #e5ece7; }
.editor-context-menu small { display: block; padding: 8px 10px 3px; color: #78887d; font-size: 10px; }
@media (min-width: 1500px) { .writing-paper { padding-left: 76px; padding-right: 76px; } }
@media (max-width: 1050px) { .writing-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; } .writing-paper { padding-left: 28px; padding-right: 28px; } }
@media (max-width: 800px) { .blog-shell:has(.writing-app) { width: min(740px, calc(100% - 28px)); padding-top: 22px; } .writing-layout { grid-template-columns: 1fr; } .writing-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .writing-header { align-items: start; gap: 12px; } .writing-actions { gap: 6px; } .writing-actions .writing-button { padding: 8px 11px; font-size: 12px; } .save-indicator { flex-basis: 100%; margin-top: 5px; } }
@media (max-width: 520px) { .blog-shell:has(.writing-app) { width: calc(100% - 20px); } .writing-header { flex-direction: column; margin: 0 5px 18px; } .writing-actions { width: 100%; } .writing-actions .primary { margin-left: auto; } .writing-heading { align-items: center; gap: 0 15px; } .writing-heading h1 { font-size: 22px; } .save-indicator { flex-basis: auto; margin: 0; font-size: 10px; } .writing-mode-bar { padding: 10px 12px; } .mode-switch button { padding: 5px 10px; } .writing-count { font-size: 10px; } .writing-paper { min-height: 650px; padding: 24px 22px 36px; } .cover-add { min-height: 100px; } .writing-sidebar { grid-template-columns: 1fr; } .writing-dialog { padding: 22px; } .paper-footer { padding: 12px; font-size: 9px; } .source-panel { padding: 18px; } .cover-area.has-cover .cover-add, .cover-remove { font-size: 10px; padding: 5px; } }
.draft-list { display: grid; gap: 12px; max-height: 55vh; overflow: auto; }
.draft-entry { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 12px; }
.draft-entry > button { width: 100%; text-align: left; }
.draft-entry small { display: block; margin-top: 5px; color: #6e747c; }
.draft-entry details { margin-top: 8px; }
.draft-entry details button { display: block; margin-top: 6px; }