/* 回忆录展示层：家藏书册。仅影响回忆录，不参与路由、数据或草稿保存。
 * 在 style.css / shell.css 后加载；印刷继续采用原有排版。
 */
@media screen {
  .mm-app, .mm-modal {
    --mm-surface: var(--vg-ink);
    --mm-border: rgba(246, 241, 230, .15);
    --mm-text: var(--vg-paper);
    --mm-secondary: var(--vg-line-strong);
    --mm-radius: 12px;
    --mm-gutter: 24px;
    font-family: var(--vg-sans);
    line-height: 1.7;
    color: var(--mm-text);
    overflow-wrap: anywhere;
  }
  .mm-app .mm-wrap { padding: 40px var(--mm-gutter) 96px; }
  .mm-app .mm-wrap.wide { max-width: 1120px; }
  .mm-app .mm-muted, .mm-modal .mm-muted { color: var(--mm-secondary); font-size: 14px; line-height: 1.75; }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .mm-app .mm-card, .mm-modal .mm-card { background: var(--mm-surface); border-color: var(--mm-border); border-radius: var(--mm-radius); padding: 24px; }
  .mm-app .mm-card + .mm-card { margin-top: 16px; }
  .mm-app .mm-card.clickable { border-left: 2px solid var(--vg-line-strong); }
  .mm-app .mm-card.clickable:hover { background: var(--vg-ink); border-color: var(--vg-line-strong); }
  .mm-app .mm-h2 { margin: 32px 0 16px; gap: 12px; font-family: var(--serif); font-size: 18px; color: var(--mm-text); flex-wrap: wrap; }
  .mm-app .mm-h2 small { color: var(--mm-secondary); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-size: 12px; }
  .mm-app .mm-story-title { font-family: var(--serif); font-size: 18px; line-height: 1.65; margin-bottom: 8px; }
  .mm-app .mm-excerpt { color: var(--mm-secondary); font-size: 14px; line-height: 1.9; margin-top: 12px; }
  .mm-app .mm-cover-img { max-height: 280px; border-radius: 4px; }
  .mm-app .mm-col-side { padding: 24px; border: 1px solid var(--mm-border); border-radius: var(--mm-radius); background: rgba(246, 241, 230, .025); }
  .mm-app .mm-col-side > .mm-h2:first-child { margin-top: 0; }
  .mm-app .mm-col-main > .mm-row > div:first-child > b { font-family: var(--serif); font-size: 18px; line-height: 1.7; }
  .mm-app .mm-body { max-width: 38em; }
  .mm-app .mm-body p { font-size: 16px; line-height: 2; margin-bottom: 1.5em; }
  .mm-app .mm-badge { white-space: normal; font-size: 12px; line-height: 1.5; padding: 4px 8px; }
  .mm-app .mm-btn, .mm-modal .mm-btn { min-height: 44px; border-radius: 8px; line-height: 1.5; padding: 12px 16px; }
  .mm-app .mm-btn-sm, .mm-modal .mm-btn-sm { padding: 8px 12px; font-size: 12px; }
  .mm-app .mm-iconbtn { min-width: 44px; min-height: 44px; }
  .mm-app .mm-mini { padding: 8px; }
  .mm-app :is(.mm-btn, .mm-iconbtn):disabled, .mm-modal .mm-btn:disabled { opacity: .5; cursor: not-allowed; }
  .mm-app :is(button, input, textarea, select, summary):focus-visible,
  .mm-modal :is(button, input, textarea, select, summary):focus-visible{
    outline: 2px solid var(--vg-seal-dk); outline-offset: 4px;
  }
  .mm-app :is(.mm-input, .mm-textarea, .mm-select), .mm-modal :is(.mm-input, .mm-textarea, .mm-select) {
    border-radius: 8px; border-color: rgba(246, 241, 230, .25); font-size: 16px; padding: 12px 16px; line-height: 1.75;
  }
  .mm-app .mm-label, .mm-modal .mm-label { color: var(--mm-secondary); font-size: 14px; margin: 16px 0 8px; }
  .mm-app #mm-editor { border-top: 2px solid var(--amber); }
  .mm-app .mm-textarea { line-height: 2; }
  
  
  
  
  
  
  /* 阅读模式采用原有米色稿纸；与深色编辑保持相同字体和间距节奏。 */
  .mm-app.mm-light { --mm-text: var(--vg-ink); --mm-secondary: var(--vg-ink2); --mm-surface: var(--vg-paper); --mm-border: rgba(42, 33, 24, .2); color: var(--mm-text); }
  .mm-app.mm-light .mm-btn-primary { background: var(--vg-ink); color: var(--vg-paper); border-color: var(--vg-ink); }
  .mm-app.mm-light :is(.mm-input, .mm-textarea, .mm-select) { color: var(--mm-text); background: var(--vg-bg); border-color: var(--vg-line-strong); }
  .mm-app.mm-light :is(.mm-input, .mm-textarea)::placeholder { color: var(--vg-ink2); opacity: 1; }
  .mm-app.mm-light .mm-select option { background: var(--vg-bg); }
  .mm-app.mm-light :is(button, input, summary):focus-visible { outline-color: var(--vg-ink2); }
  .mm-app .mm-book { max-width: 780px; padding: 40px 24px 96px; }
  .mm-app .mm-cover { padding: 64px 0 64px; margin-bottom: 48px; border-bottom: 1px solid var(--vg-line-strong); }
  .mm-app .mm-cover h1 { font-size: 24px; line-height: 1.65; letter-spacing: .1em; overflow-wrap: anywhere; }
  .mm-app .mm-cover p { color: var(--vg-ink2); font-size: 14px; line-height: 1.9; }
  .mm-app .mm-toc li { gap: 24px; padding: 12px 0; font-size: 16px; }
  .mm-app .mm-toc li > span:last-child { flex-shrink: 0; color: var(--vg-ink2); }
  .mm-app .mm-chapter { margin-top: 64px; }
  .mm-app .mm-chapter h2 { font-size: 20px; line-height: 1.75; margin: 0 0 12px; }
  .mm-app .mm-chapter .period { color: var(--vg-ink2); margin-bottom: 40px; }
  .mm-app .mm-story { margin-bottom: 64px; }
  .mm-app .mm-story h3 { font-size: 20px; line-height: 1.65; margin-bottom: 12px; }
  .mm-app .mm-story :is(.meta, .photos figcaption) { color: var(--vg-ink2); line-height: 1.8; }
  .mm-app .mm-story p { font-size: 18px; line-height: 2.15; margin-bottom: 1.4em; text-align: start; }
  .mm-app .mm-story .photos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; margin: 24px 0; }
  .mm-app.mm-elder .mm-body p { font-size: 20px; }
  .mm-app.mm-elder :is(.mm-btn, .mm-input, .mm-textarea) { font-size: 18px; }
  @media (min-width: 1024px) {
    .mm-app .mm-book-cols { gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
    /* 长待办不粘顶，避免矮屏和大字号下出现难以滚动的侧栏。 */
    .mm-app .mm-book-cols .mm-col-side { position: static; }
  }
  @media (max-width: 1023px) {
    .mm-app .mm-col-side { margin-bottom: 32px; }
  }
  @media (max-width: 767px) {
    .mm-app .mm-wrap { padding-top: 24px; }
    
    
    
    
    
    
    .mm-app .mm-card, .mm-app .mm-col-side { padding: 16px; }
    .mm-app .mm-book { padding-top: 24px; }
    .mm-app .mm-cover { padding-block: 40px; }
    .mm-app .mm-story p { font-size: 16px; line-height: 2; }
    
  }
  
  @media (prefers-reduced-motion: reduce) {
    .mm-app *, .mm-modal * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    
  }
}

/* 流式字号改成两档字阶：小屏取下限，≥64rem 取上限 */
@media (min-width: 64rem) {
  .mm-app .mm-cover h1 { font-size: 36px; }
  .mm-app .mm-chapter h2 { font-size: 24px; }
}

/* 流式留白改成两档间距：小屏取下限，≥64rem 取上限 */
@media (min-width: 64rem) {
  .mm-app, .mm-modal { --mm-gutter: 48px; }
  .mm-app .mm-book { padding: 40px 64px 96px; }
}