/* One typography contract shared by the editor, preview and public article. */
.article-content,
.note-editable {
    font-family: "Sarabun", "Noto Sans Thai", "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.85;
    color: #1e293b;
    overflow-wrap: break-word;
    word-break: normal;
    line-break: auto;
    text-align: start;
    word-spacing: normal;
    letter-spacing: normal;
}

/* Avoid stretched Thai glyphs and English spaces from saved justification. */
.article-content [style*="text-align: justify"],
.article-content [style*="text-align:justify"],
.article-content [align="justify"],
.note-editable [style*="text-align: justify"],
.note-editable [style*="text-align:justify"],
.note-editable [align="justify"] {
    text-align: start !important;
    text-align-last: auto !important;
    text-justify: none;
}

.article-content h1, .note-editable h1,
.article-content h2, .note-editable h2,
.article-content h3, .note-editable h3,
.article-content h4, .note-editable h4 {
    font-family: "Playfair Display", "Noto Serif Thai", serif;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content h1, .note-editable h1 { font-size: 40px; }
.article-content h2, .note-editable h2 { font-size: 32px; }
.article-content h3, .note-editable h3 { font-size: 26px; }
.article-content h4, .note-editable h4 { font-size: 22px; }
.article-content p, .note-editable p { margin-top: 0; margin-bottom: 1.4rem; }
.article-content ul, .note-editable ul,
.article-content ol, .note-editable ol { margin-bottom: 1.4rem; padding-left: 2rem; }
.article-content blockquote, .note-editable blockquote {
    border-left: 4px solid #d92662;
    background: #fff1f2;
    padding: 1.2rem 1.6rem;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    margin: 2rem 0;
}
.article-content img, .note-editable img { max-width: 100%; height: auto; border-radius: 16px; margin: 1.5rem 0; }
.article-content video, .note-editable video { display: block; width: 100%; max-width: 100%; height: auto; background: #0f172a; border-radius: 14px; }
.article-content table, .note-editable table { width: 100%; border-collapse: collapse; }
.article-content td, .article-content th,
.note-editable td, .note-editable th { border: 1px solid #cbd5e1; padding: 8px; }

@media (max-width: 768px) {
    .article-content, .note-editable { font-size: 17px; line-height: 1.8; }
    .article-content h1, .note-editable h1 { font-size: 34px; }
    .article-content h2, .note-editable h2 { font-size: 28px; }
    .article-content h3, .note-editable h3 { font-size: 24px; }
}