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/hannam-jari/styles/admin.css

@@ -1,7 +1,7 @@
 .admin-body {
   min-width: 0;
-  color: #1c1c1a;
-  background: #f3f4f3;
+  color: var(--ink);
+  background: var(--surface);
 }
 
 .admin-body h1,
@@ -53,9 +53,9 @@
   height: 2rem;
   flex: 0 0 auto;
   place-items: center;
-  color: #121210;
-  background: var(--gold-light);
-  border-radius: 50%;
+  color: #ffffff;
+  background: var(--accent);
+  border-radius: var(--radius);
   font-size: 0.58rem;
   font-weight: 850;
   letter-spacing: 0.08em;
@@ -129,7 +129,7 @@
 .sidebar-nav a.is-current {
   color: #fff;
   background: #2c2b27;
-  box-shadow: inset 2px 0 0 var(--gold-light);
+  box-shadow: inset 2px 0 0 var(--accent-soft);
 }
 
 .sidebar-nav a > span {
@@ -436,17 +436,6 @@
   font-weight: 650;
 }
 
-.state-simulator {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding-left: 0.55rem;
-  border-left: 1px solid #e1e2e0;
-  color: #777973;
-  font-size: 0.61rem;
-  font-weight: 700;
-}
-
 .admin-workbench {
   display: grid;
   min-width: 0;
@@ -598,7 +587,7 @@
 
 .queue-table tbody tr.is-selected {
   background: #f2f5f3;
-  box-shadow: inset 3px 0 0 var(--gold-dark);
+  box-shadow: inset 3px 0 0 var(--accent);
 }
 
 .queue-table tbody tr.is-hidden {
@@ -943,7 +932,7 @@
   padding: 0.3rem 0.45rem;
   color: #fff;
   background: rgba(18, 18, 16, 0.82);
-  border-left: 2px solid var(--gold-light);
+  border-left: 2px solid var(--accent-soft);
   font-size: 0.54rem;
 }
 
@@ -1106,7 +1095,7 @@
   min-width: 2.75rem;
   min-height: 2.75rem;
   padding: 0.5rem;
-  color: #6f5420;
+  color: var(--accent-deep);
   background: transparent;
   border: 0;
   font-size: 0.58rem;
@@ -1376,7 +1365,7 @@
 }
 
 .check-row button {
-  color: #6f5420;
+  color: var(--accent-deep);
   background: transparent;
   border: 0;
   font-size: 0.52rem;
@@ -1497,7 +1486,7 @@
 }
 
 .ai-summary > span {
-  color: #c6a15b;
+  color: var(--accent-soft);
   font-size: 0.51rem;
   font-weight: 700;
 }
@@ -1590,7 +1579,7 @@
 }
 
 .claim-review footer button {
-  color: #6f5420;
+  color: var(--accent-deep);
   background: transparent;
   border: 0;
   font-size: 0.49rem;
@@ -1651,7 +1640,7 @@
 }
 
 .appointment-card > button {
-  color: #6f5420;
+  color: var(--accent-deep);
   background: transparent;
   border: 0;
   font-size: 0.49rem;
@@ -1945,7 +1934,7 @@ html:has(.admin-dialog[open]) {
   padding: 0.85rem;
   color: #fff;
   background: #20211f;
-  border-left: 3px solid var(--gold-light);
+  border-left: 3px solid var(--accent-soft);
 }
 
 .admin-noscript p {
@@ -2050,14 +2039,6 @@ html:has(.admin-dialog[open]) {
   .queue-toolbar {
     grid-template-columns: minmax(13rem, 1fr) auto auto;
   }
-
-  .state-simulator {
-    grid-column: 1 / -1;
-    justify-content: flex-end;
-    padding: 0.55rem 0 0;
-    border-top: 1px solid #e1e2df;
-    border-left: 0;
-  }
 }
 
 @media (max-width: 50rem) {
@@ -2151,15 +2132,6 @@ html:has(.admin-dialog[open]) {
     grid-column: 1 / -1;
   }
 
-  .state-simulator {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .state-simulator select {
-    width: 100%;
-  }
-
   .role-proof > header,
   .settings-proof {
     align-items: flex-start;
@@ -2271,7 +2243,6 @@ html:has(.admin-dialog[open]) {
   color: rgba(248, 247, 243, 0.82);
 }
 
-.admin-main .state-simulator > span,
 .admin-main .icon-button kbd,
 .admin-main .role-proof > header span {
   color: #4f514b;