feat(site): rework 19 marketing showcases for composition diversity

Measured convergence before: split hero 13/19, top-bar nav 19/19,
one-line notice footer 14/19, body Pretendard 17/21, 10 similarity
pairs above 0.78. Each showcase got a pre-assigned hero family, nav
form, footer form, type pair, background, accent hue, radius, motion
grammar and material from outputs/rework-2026-10-06/plan.md; direction
cards and the chosen reason are recorded in every design.md.

After: 0 similarity warnings, 19 distinct display faces, 7 hero
families, 5 nav forms, 5 footer forms, no scroll reveals, 5 showcases
with SVG filter materials. Example contact values replace bracket
placeholders under the existing fictional-brand notices. Thumbnails,
OG images, card copy and three e2e assertions updated; dead CSS in
dure-enrollment and hannam-jari removed; similarity.mjs learns the new
font families.

apps/site/public/work/cheongon-care/styles/protocol.css

@@ -0,0 +1,162 @@
+/* ==========================================================================
+   청온 케어 — 2차 페이지(작업 절차) 전용 스타일. 공통 셸과 토큰은 main.css·tokens.css 가 맡는다.
+   ========================================================================== */
+
+.proto-intro {
+  padding-block: var(--space-5) var(--space-7);
+}
+
+.crumb {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+  margin-bottom: var(--space-4);
+}
+
+.crumb a {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--control-block);
+  text-decoration: underline;
+  text-underline-offset: 0.25em;
+}
+
+.crumb a:hover {
+  color: var(--accent);
+}
+
+.crumb-sep {
+  color: var(--ink-faint);
+}
+
+.crumb [aria-current="page"] {
+  color: var(--ink);
+  font-weight: var(--weight-strong);
+}
+
+.proto-facts {
+  max-width: 40em;
+}
+
+.proto-intro .demo-notice {
+  margin-top: var(--space-5);
+}
+
+.proto-record {
+  padding-block: var(--space-7);
+  border-top: 1px solid var(--line);
+}
+
+.proto-record-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
+  gap: var(--space-6);
+  align-items: center;
+}
+
+.proto-record-grid .gear-cutout img {
+  aspect-ratio: 16 / 10;
+  object-position: 55% 45%;
+  mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
+  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 55% 50%, var(--ink) 55%, transparent 100%);
+}
+
+.proto-lead {
+  margin-top: var(--space-3);
+  color: var(--ink-muted);
+  max-width: var(--measure);
+}
+
+.compare {
+  margin-top: var(--space-4);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface-raised);
+  overflow: hidden;
+}
+
+.compare-cell {
+  padding: var(--space-4);
+}
+
+.compare-cell + .compare-cell {
+  border-left: 1px solid var(--line);
+}
+
+.compare dt {
+  font-size: var(--step--1);
+  font-weight: var(--weight-medium);
+  color: var(--ink-muted);
+}
+
+.compare-val {
+  margin-top: var(--space-1);
+  font-size: var(--step-2);
+  font-weight: var(--weight-strong);
+  letter-spacing: -0.01em;
+}
+
+.compare-val.before {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+  text-decoration-thickness: 2px;
+}
+
+.compare-val.after {
+  color: var(--accent-hover);
+}
+
+.compare-sub {
+  font-size: var(--step--1);
+  color: var(--ink-muted);
+}
+
+.proto-cta {
+  padding-block: 0 var(--space-7);
+}
+
+.card {
+  padding: var(--space-5);
+  background: var(--surface-raised);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  display: grid;
+  gap: var(--space-2);
+  justify-items: start;
+}
+
+.card .btn-primary {
+  margin-top: var(--space-3);
+}
+
+.calc-submit-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 60em) {
+  .proto-record-grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-5);
+  }
+
+  .proto-record-grid .gear-cutout {
+    order: 2;
+  }
+}
+
+@media (max-width: 37.5em) {
+  .compare {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .compare-cell + .compare-cell {
+    border-left: 0;
+    border-top: 1px solid var(--line);
+  }
+}