/* 本文の HTML（note の記事・特集の本文・生産者の紹介文）を読みやすく組む。外の HTML なので、入れ子の深さや書き方に頼らない
   使う画面: views/blog/show.ejs・views/campaigns/show.ejs・views/seller/profile-show.ejs */
.prose { font-size: var(--fs-md); line-height: 2.15; color: var(--ink); overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.4em; }
.prose :where(p, li, dd, td, blockquote, figcaption) { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
.prose :where(h1, h2, h3, h4) { margin-top: 2.4em; margin-bottom: -.4em; font-family: var(--f-min); font-weight: 600; letter-spacing: .08em; line-height: 1.6; }
.prose :where(h1, h2) { font-size: var(--fs-xl); }
.prose :where(h3) { font-size: var(--fs-lg); }
.prose :where(h4) { font-size: var(--fs-md); }
.prose > :first-child { margin-top: 0; }
.prose a { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; transition: text-decoration-color var(--t-1); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong, .prose b { font-weight: 600; }
.prose :where(ul, ol) { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .3em; }
.prose li::marker { color: var(--ink-3); }
.prose img { width: auto; height: auto; max-width: 100%; margin-inline: auto; }
.prose :where(figure) { margin: 2em 0; }
.prose figcaption { margin-top: 10px; font-size: var(--fs-xs); letter-spacing: .1em; color: var(--ink-2); text-align: center; }
.prose blockquote { margin: 2em 0; padding: .2em 0 .2em 1.4em; border-left: 1px solid var(--ink); font-family: var(--f-min); font-size: var(--fs-lg); line-height: 2; color: var(--ink); }
.prose hr { margin: 3em auto; width: 48px; border-top-color: var(--rule-strong); }
.prose :where(pre, code) { font-size: .9em; background: var(--paper-2); }
.prose pre { padding: 1em; overflow-x: auto; }
/* 表は、はみ出したら表ごと横に送れる（block）。エディタの表（thead なし）は中身を幅いっぱいに広げ、広い表は横に送る */
.prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: var(--fs-sm); line-height: 1.8; }
.prose table:not(:has(thead)) > tbody { display: table; width: 100%; }
.prose :where(th, td) { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.prose iframe, .prose video { max-width: 100%; }
/* 書いた人が付けた色・大きさの指定で崩れないように */
.prose [style*="font-size"] { font-size: inherit !important; }
.prose [style*="width"]:not(img):not(table) { width: auto !important; max-width: 100%; }