**توضیحات طراحی برای ویرایشگر بلوک:**

این مقاله با هدف نمایش منحصر به فرد و رسپانسیو در ویرایشگرهای بلوک (مانند گوتنبرگ وردپرس) و کلاسیک طراحی شده است. تمام استایل‌ها به صورت inline `style` در هر تگ HTML اعمال شده‌اند تا پس از کپی، بیشترین سازگاری را داشته و نیازی به تعریف CSS جداگانه در اکثر موارد نداشته باشند.

**رنگ‌بندی:**
* **پس‌زمینه اصلی:** سفید خالص (Default)
* **رنگ متن اصلی:** `#34495E` (آبی تیره مایل به خاکستری) برای خوانایی بالا.
* **رنگ هدینگ‌های اصلی (H1, H2):** تیره‌تر و پررنگ‌تر (`#2C3E50` و `#34495E`) برای جلب توجه.
* **رنگ هدینگ‌های فرعی (H3):** کمی روشن‌تر (`#5B6A7D`) با تاکید کمتر.
* **رنگ تاکید/لینک‌ها (برای بوردرها، آیکون‌ها، یا باکس‌های خاص):** `#6A96C1` (آبی کبالت ملایم) و سبز ملایم (`#4CAF50`, `#2E7D32`) در اینفوگرافیک برای حس اعتماد و رشد.
* **پس‌زمینه بخش‌ها (H2):** `#F8F9FA` (خاکستری بسیار روشن) برای تفکیک بصری.
* **پس‌زمینه اینفوگرافیک:** `#E8F5E9` (سبز نعنایی بسیار روشن) برای ایجاد یک بلوک جذاب و متمایز.

**فونت‌ها:**
* فونت اصلی برای تمام متن و هدینگ‌ها: `Vazirmatn, sans-serif` که یک فونت فارسی مدرن، خوانا و بسیار مناسب برای صفحات وب است. (در صورت عدم وجود، از فونت‌های عمومی `sans-serif` استفاده می‌شود.)

**رسپانسیو بودن:**
* **`max-width: 800px; margin: 0 auto;`:** برای محدود کردن عرض محتوا و مرکزی نگه داشتن آن در نمایشگرهای بزرگ (لپ‌تاپ، تبلت، تلویزیون) که خوانایی را افزایش می‌دهد.
* **`padding: 0 15px;`:** برای ایجاد فاصله از کناره‌ها در دستگاه‌های کوچک (موبایل) و جلوگیری از چسبیدن متن به لبه‌ها.
* **`line-height: 1.9;`:** برای افزایش خوانایی متن اصلی و جلوگیری از درهم فشرده دیده شدن خطوط.
* **بلوک اینفوگرافیک:** از `display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px;` استفاده شده تا محتوای آن به صورت خودکار در صفحات کوچک‌تر به سطر بعد منتقل شود و به خوبی نمایش داده شود. `min-width: 280px;` برای آیتم‌های داخل اینفوگرافیک تضمین می‌کند که حتی در کوچک‌ترین صفحه‌ها نیز خوانا بمانند.
* **جدول:** `overflow-x: auto;` برای جدول در نظر گرفته شده تا در صورت باریک شدن صفحه، امکان اسکرول افقی را فراهم کند و محتوا از بین نرود.

**ساختار و UX:**
* استفاده از `H1`, `H2`, `H3` برای ایجاد یک سلسله‌مراتب واضح در محتوا.
* پاراگراف‌های کوتاه و بولت‌پوینت‌ها برای اسکن‌پذیری بالاتر و درک سریع‌تر مطالب.
* باکس اینفوگرافیک با رنگ پس‌زمینه متفاوت و طراحی بصری (آیکون‌ها و عنوان‌های مشخص) برای جلب توجه و ارائه چکیده اطلاعات به صورت بصری.
* جدول برای مقایسه واضح اطلاعات.
* فاصله‌گذاری مناسب بین بخش‌ها (`margin-top`, `margin-bottom`) برای جلوگیری از شلوغی و ایجاد فضایی برای تنفس بصری.