feat(colors): блок соответствия Oracal → Сайт

Визуальное сравнение фирменной палитры с реальными цветами сайта:
- 4 пары с соответствием (053M↔#63bac3, 073M↔#60959c, 066M↔#52b4bd, 081M↔#bf9975)
- 2 Oracal-цвета без аналога на сайте (050M, 080M)
- 3 цвета только сайта без Oracal-кода (текст #464646, серый #949290, крем #e9e4d4)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/app/foundation/colors/page.tsx

@@ -102,6 +102,55 @@ const BRAND_COLORS = [
   },
 ];
 
+/* ─── Соответствие цветов ──────────────────────────────────────────── */
+const COLOR_MAPPING = [
+  {
+    brand: { oracal: "053M", name: "Основной бирюзовый", hex: "#7ecfca" },
+    web:   { name: "Бирюзовый", hex: "#63bac3", count: 4 },
+    note:  "Чуть темнее и насыщеннее на сайте",
+  },
+  {
+    brand: { oracal: "073M", name: "Тёмный серо-голубой", hex: "#5b7b87" },
+    web:   { name: "Серо-бирюзовый", hex: "#60959c", count: 7 },
+    note:  "Светлее на сайте",
+  },
+  {
+    brand: { oracal: "066M", name: "Средний бирюзовый", hex: "#5bb5ad" },
+    web:   { name: "Бирюзовый средний", hex: "#52b4bd", count: 4 },
+    note:  "Смещён в синеву",
+  },
+  {
+    brand: { oracal: "081M", name: "Бежевый", hex: "#c4a882" },
+    web:   { name: "Бежевый", hex: "#bf9975", count: 12 },
+    note:  "Темнее и насыщеннее на сайте",
+  },
+  {
+    brand: { oracal: "050M", name: "Тёмно-синий", hex: "#1b4c72" },
+    web:   null,
+    note:  "Не найден в CSS сайта",
+  },
+  {
+    brand: { oracal: "080M", name: "Тёмно-коричневый", hex: "#5c2e0e" },
+    web:   null,
+    note:  "Не найден в CSS сайта",
+  },
+  {
+    brand: null,
+    web:   { name: "Основной текст", hex: "#464646", count: 3 },
+    note:  "Только на сайте — нет Oracal-аналога",
+  },
+  {
+    brand: null,
+    web:   { name: "Второстепенный текст", hex: "#949290", count: 4 },
+    note:  "Только на сайте — нет Oracal-аналога",
+  },
+  {
+    brand: null,
+    web:   { name: "Кремовый фон", hex: "#e9e4d4", count: 1 },
+    note:  "Только на сайте — нет Oracal-аналога",
+  },
+];
+
 /* ─── Цвета с сайта ────────────────────────────────────────────────── */
 // Источник: https://perm.oclinica.ru/sites/all/themes/clinic_bootstrap_mobile/css/style.css
 // Извлечены парсингом CSS: grep + python Counter по property/value, 2026-03-22
@@ -437,7 +486,94 @@ export default function ColorsPage() {
         </div>
       </section>
 
-      {/* 4. Применение */}
+      {/* 4. Соответствие */}
+      <section className="mb-12">
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+            Соответствие: Oracal → Сайт
+          </h2>
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            Сравнение фирменной палитры (Oracal, брендбук) с реальными цветами, применёнными на сайте.
+            Расхождения ожидаемы — цифровая адаптация плёночных цветов под экран.
+          </p>
+        </div>
+        <div className="flex flex-col gap-3">
+          {COLOR_MAPPING.map((row, i) => (
+            <div
+              key={i}
+              className="flex items-center gap-3 p-4 rounded-xl border"
+              style={{ borderColor: "var(--bb-border)", background: "var(--bb-content-bg)" }}
+            >
+              {/* Левая сторона — Oracal */}
+              <div className="flex items-center gap-3 w-56 shrink-0">
+                {row.brand ? (
+                  <>
+                    <div
+                      className="w-10 h-10 rounded-lg shrink-0 border"
+                      style={{ background: row.brand.hex, borderColor: "var(--bb-border)" }}
+                    />
+                    <div>
+                      <p className="text-xs font-semibold font-mono" style={{ color: "var(--bb-text)" }}>
+                        {row.brand.hex.toUpperCase()}
+                      </p>
+                      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                        Oracal {row.brand.oracal}
+                      </p>
+                    </div>
+                  </>
+                ) : (
+                  <div
+                    className="w-10 h-10 rounded-lg shrink-0 flex items-center justify-center text-lg border"
+                    style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+                  >
+                    —
+                  </div>
+                )}
+              </div>
+
+              {/* Стрелка */}
+              <div className="shrink-0 text-sm font-bold" style={{ color: "var(--bb-text-muted)" }}>→</div>
+
+              {/* Правая сторона — Сайт */}
+              <div className="flex items-center gap-3 w-56 shrink-0">
+                {row.web ? (
+                  <>
+                    <div
+                      className="w-10 h-10 rounded-lg shrink-0 border"
+                      style={{ background: row.web.hex, borderColor: "var(--bb-border)" }}
+                    />
+                    <div>
+                      <p className="text-xs font-semibold font-mono" style={{ color: "var(--bb-text)" }}>
+                        {row.web.hex.toUpperCase()}
+                      </p>
+                      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                        {row.web.name} · ×{row.web.count}
+                      </p>
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <div
+                      className="w-10 h-10 rounded-lg shrink-0 flex items-center justify-center text-lg border"
+                      style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+                    >
+                      —
+                    </div>
+                    <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Нет на сайте</p>
+                  </div>
+                )}
+              </div>
+
+              {/* Примечание */}
+              <p className="flex-1 text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                {row.note}
+              </p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 5. Применение */}
       <section className="mb-12">
         <div className="mb-6">
           <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>