/* Editor markdown preview: independent reading surfaces for both themes. */
.markdown-preview-wrapper {
    --md-surface: #fff;
    --md-text: #334155;
    --md-heading: #18283e;
    --md-muted: #64748b;
    --md-line: #e2e8f0;
    --md-link: #365acb;
    --md-soft: #f3f6fc;
    --md-code: #f8fafc;
    --md-code-text: #334155;
    --md-inline: #eef2ff;
    --md-inline-text: #5145a1;
    min-width: 0;
    background: var(--md-surface);
    border: 1px solid var(--md-line);
    border-radius: 14px;
    box-shadow: 0 4px 20px #172a4606;
}
[data-theme="dark"] .markdown-preview-wrapper {
    --md-surface: #171e36;
    --md-text: #d1d9eb;
    --md-heading: #f0f4ff;
    --md-muted: #99a9c5;
    --md-line: #303c58;
    --md-link: #a3baff;
    --md-soft: #202c47;
    --md-code: #11182a;
    --md-code-text: #d1ddf0;
    --md-inline: #29314f;
    --md-inline-text: #d4c6ff;
    box-shadow: 0 4px 24px #03081820;
}
#md-preview {
    min-width: 0;
    padding: 52px clamp(20px, 3vw, 40px) 40px;
    color: var(--md-text);
    font-size: 1rem;
    line-height: 1.85;
    overflow-wrap: anywhere;
    scrollbar-width: thin;
    scrollbar-color: var(--md-line) transparent;
}
#md-preview ::selection { background: var(--md-inline); color: var(--md-heading); }
#md-preview > :first-child { margin-top: 0; }
#md-preview p { margin: 0 0 1.15em; }
#md-preview h1, #md-preview h2, #md-preview h3,
#md-preview h4, #md-preview h5, #md-preview h6 {
    margin: 1.8em 0 .7em;
    color: var(--md-heading);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.035em;
}
#md-preview h1 { font-size: 1.8rem; padding-bottom: .55em; border-bottom: 1px solid var(--md-line); }
#md-preview h2 { font-size: 1.4rem; padding-bottom: .45em; border-bottom: 1px solid var(--md-line); }
#md-preview h3 { font-size: 1.15rem; }
#md-preview h4, #md-preview h5, #md-preview h6 { font-size: 1rem; }
#md-preview .md-collapsible-heading { gap: 8px; }
#md-preview .md-collapse-toggle { width: 20px; height: 24px; color: var(--md-muted); opacity: .8; font-size: 16px; }
#md-preview .md-collapsible-heading:hover { color: var(--md-link); }
#md-preview strong { color: var(--md-heading); font-weight: 650; }
#md-preview ul, #md-preview ol { margin: 0 0 1.3em; padding-left: 1.5em; }
#md-preview li { margin: .4em 0; padding-left: .15em; }
#md-preview li::marker { color: var(--md-muted); }
#md-preview li > p { margin-bottom: .5em; }
#md-preview li > ul, #md-preview li > ol { margin: .5em 0; }
#md-preview .md-task-item { list-style: none; }
#md-preview .md-task-item > input[type="checkbox"],
#md-preview .md-task-item > p > input[type="checkbox"] { margin-left: -1.5em; }
#md-preview input[type="checkbox"] { width: 16px; height: 16px; margin-right: 8px; vertical-align: -2px; accent-color: var(--md-link); cursor: pointer; }
#md-preview .md-task-complete { color: var(--md-muted); }
#md-preview a { color: var(--md-link); text-decoration: underline; text-decoration-color: var(--md-line); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .15s; }
#md-preview a:hover { text-decoration-color: currentColor; }
#md-preview a.memo-wikilink { border-bottom-color: var(--md-link); text-decoration: none; }
#md-preview a:focus-visible, #md-preview input:focus-visible,
#md-preview button:focus-visible, #md-preview .md-table-scroll:focus-visible {
    outline: 2px solid var(--md-link); outline-offset: 3px; border-radius: 4px;
}
#md-preview blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--md-link); border-radius: 0 10px 10px 0; background: var(--md-soft); color: var(--md-text); }
#md-preview blockquote > :last-child { margin-bottom: 0; }
#md-preview code { background: var(--md-inline); color: var(--md-inline-text); padding: .18em .4em; border-radius: 5px; font-size: .85em; }
#md-preview .code-block-wrapper { margin: 24px 0; background: var(--md-code); border: 1px solid var(--md-line); border-radius: 12px; box-shadow: none; }
#md-preview .code-block-header { padding: 10px 16px; background: var(--md-soft); border-bottom: 1px solid var(--md-line); }
#md-preview .code-lang { color: var(--md-muted); font-size: 11px; }
#md-preview .code-copy-btn { background: var(--md-surface); color: var(--md-text); border-color: var(--md-line); box-shadow: none; }
#md-preview .code-copy-btn:hover { background: var(--md-inline); color: var(--md-link); }
#md-preview pre { padding: 20px; }
#md-preview pre code { padding: 0; background: transparent; color: var(--md-code-text); font-size: 13px; line-height: 1.75; }
#md-preview .code-expand-btn { background: var(--md-code); color: var(--md-link); border-top: 1px solid var(--md-line); }
#md-preview .code-expand-btn:hover { background: var(--md-soft); }
#md-preview .md-table-scroll { overflow-x: auto; max-width: 100%; margin: 24px 0; border: 1px solid var(--md-line); border-radius: 10px; }
#md-preview table { width: 100%; border-collapse: collapse; font-size: .9rem; text-align: left; }
#md-preview th, #md-preview td { min-width: 90px; padding: 11px 16px; border-bottom: 1px solid var(--md-line); }
#md-preview th { background: var(--md-soft); color: var(--md-heading); font-weight: 600; }
#md-preview tr:nth-child(even) td { background: var(--md-code); }
#md-preview tr:last-child td { border-bottom: none; }
#md-preview hr { border: 0; border-top: 1px solid var(--md-line); margin: 32px 0; }
#md-preview img { max-width: 100%; height: auto; border-radius: 10px; margin: 24px 0; box-shadow: none; }
.markdown-preview-wrapper .md-fullscreen-btn { background: var(--md-soft); color: var(--md-muted); border-color: var(--md-line); box-shadow: none; }
.markdown-preview-wrapper .md-fullscreen-btn:hover { background: var(--md-inline); color: var(--md-link); border-color: var(--md-link); }
.markdown-preview-wrapper .memo-back-btn { background: var(--md-soft); color: var(--md-link); border-color: var(--md-line); }
@media (max-width: 600px) {
    #md-preview { padding: 52px 20px 28px; font-size: .95rem; }
    #md-preview h1 { font-size: 1.55rem; }
    #md-preview h2 { font-size: 1.25rem; }
    #md-preview blockquote, #md-preview pre { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .markdown-preview-wrapper.show { animation: none; }
    #md-preview a, #md-preview img { transition: none; }
}