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/dure-enrollment/design.md

@@ -10,11 +10,9 @@
 
 | 축 | 질문 | 적용 |
 | --- | --- | --- |
-| Warde · 정보 전달 | 필터 뒤의 과목 목록과 시간표가 한 작업 흐름으로 읽히는가 | 공통 작업면과 한 단계 낮춘 중복 테두리 |
-| Ruder · 비교 변수 | 과목명·시간·학점·여석을 같은 시선 흐름에서 비교하는가 | 행 메타와 우측 학점·여석의 정렬, tabular figures |
-| Albers · 상태 맥락 | 관심·신청·여석 부족 상태가 텍스트와 색으로 함께 구분되는가 | 상태 텍스트를 남기고 색은 상태 보조로만 사용 |
-
-Warde, Ruder, Albers는 정보 전달·비교 변수·상태 맥락을 검토하는 참고 질문이며 인과나 성능 법칙이 아니다.
+| 작업 흐름 | 필터 → 과목 목록 → 내 시간표가 한 작업면에서 이어지는가 | 공통 작업면과 한 단계 낮춘 중복 테두리. 신청하면 시간표 칸이 바로 채워진다 |
+| 비교 변수 | 과목명·요일·학점(3학점/2학점)·여석(여석 3~31)을 같은 시선 흐름에서 비교하는가 | 행 메타와 우측 학점·여석의 정렬, 숫자는 tabular |
+| 상태 | 관심·신청·여석 3 이하(`is-low`) 상태가 텍스트와 색으로 함께 구분되는가 | 상태 텍스트를 남기고 색은 상태 보조로만 사용 |
 
 ## 역할 토큰과 검증
 
@@ -22,3 +20,11 @@ Warde, Ruder, Albers는 정보 전달·비교 변수·상태 맥락을 검토하
 - `verify-final` 18개 묶음은 16개가 즉시 통과했다. 전체 묶음의 invariant·visual 검사는 Gaon·Dure를 대상으로 하며, 나머지 2개는 수정 뒤 release 독립 재실행에서 ALL PASS·ALL MATCH였다.
 - root는 28개 모바일, 21개 데스크톱, 7개 하위 경로와 30개 앱 상태를 직접 검토해 수용했다. stress 112건은 hard failure 0이며, 가로 넘침 4건은 targeted fix 뒤 390px 재측정에서 0이다.
 - 이 기록은 렌더·계약 범위의 현재 결과다. 모든 폭·키보드 경로·인쇄 등 개별 기능을 완전 재실행했다는 뜻이 아니며, 참여자 과업 효과도 미측정이다.
+
+## 2026-10-02 레드팀 06 수정 기록
+
+- `.mono` 유틸리티를 등폭 서체에서 본문 서체(IBM Plex Sans KR) + tabular-nums로 바꿨다. "여석 12", "월·수 13:00–14:30"처럼 한글이 섞인 줄에서 공백이 등폭 셀 너비로 벌어졌다. 시각 회귀 기준선은 이 의도적 변경으로 갱신했다.
+
+## 2026-10-02 카피 교정
+
+- "시간표에 얹히는 수강신청", "과목의 원장", "주간 자리"처럼 대학 수강신청 화면에서 쓰지 않는 은유·어휘를 사실 문장으로 바꿨다. 다이얼로그의 영문 장식 라벨 COURSE는 "과목"으로 바꿨다.

apps/site/public/work/dure-enrollment/index.html

@@ -20,7 +20,7 @@
       content="과목 선택과 시간표를 함께 살펴보는 수강신청 화면입니다. 관심 과목, 신청 내역, 이수 현황을 한 흐름으로 확인할 수 있습니다."
     />
     <meta property="og:title" content="두레대학 수강신청 · 시간표" />
-    <meta property="og:description" content="시간표에 얹히는 수강신청." />
+    <meta property="og:description" content="과목을 고르면 바로 내 시간표에 들어가는 수강신청 화면." />
     <meta property="og:type" content="website" />
     <meta name="theme-color" content="#fafafa" />
 
@@ -136,7 +136,7 @@
             <button type="button" class="btn-line" data-goto="catalog">과목 찾기로 가기</button>
           </div>
           <section class="panel st-suggest" id="st-suggest" aria-labelledby="stsg-h" hidden>
-            <h2 id="stsg-h">지금 여석이 임박한 과목 <span class="h-note">관심을 남겨 두면 마감 전에 확인할 수 있습니다</span></h2>
+            <h2 id="stsg-h">여석이 얼마 남지 않은 과목 <span class="h-note">관심을 남겨 두면 마감 전에 확인할 수 있습니다</span></h2>
             <ul class="course-list" id="st-suggest-list"><!-- JS --></ul>
           </section>
         </div>
@@ -145,7 +145,7 @@
       <!-- ── 신청 내역 ── -->
       <section class="view" id="view-enrollments" aria-labelledby="en-h" tabindex="-1">
         <h2 class="v-h" id="en-h">신청 내역</h2>
-        <p class="view-sub">이번 학기에 신청한 과목의 원장. 여기서도 취소할 수 있습니다.</p>
+        <p class="view-sub">이번 학기에 신청한 과목입니다. 여기서도 취소할 수 있습니다.</p>
         <div class="statline" id="en-stats"></div>
         <div class="sheet">
           <p class="en-sum mono">합계 <strong id="en-credits">0</strong>학점 / 18</p>
@@ -164,7 +164,7 @@
           </div>
           <div class="empty-box" id="en-empty" hidden>
             <p>신청한 과목이 없습니다.</p>
-            <p class="muted">시간표가 비어 있습니다. 과목 찾기에서 첫 과목을 얹어보세요.</p>
+            <p class="muted">시간표가 비어 있습니다. 과목 찾기에서 과목을 신청해 보세요.</p>
             <button type="button" class="btn-line" data-goto="catalog">과목 찾기로 가기</button>
           </div>
           <p class="status" id="en-status" role="status" aria-live="polite"></p>
@@ -174,7 +174,7 @@
       <!-- ── 이수 현황 ── -->
       <section class="view" id="view-credits" aria-labelledby="cr-h" tabindex="-1">
         <h2 class="v-h" id="cr-h">이수 현황</h2>
-        <p class="view-sub">네 학기를 마친 시점의 기록에 이번 학기 신청을 얹어 봅니다. 신청은 확정이 아닙니다.</p>
+        <p class="view-sub">4학기까지 이수한 학점에 이번 학기 신청 학점을 더해 보여 줍니다. 신청 학점은 아직 확정 전입니다.</p>
         <div class="statline" id="cr-stats"></div>
         <div class="sheet table-wrap">
           <table id="cr-table">
@@ -199,7 +199,7 @@
       <!-- ── 과목 총람 ── -->
       <section class="view" id="view-archive" aria-labelledby="ar-h" tabindex="-1">
         <h2 class="v-h" id="ar-h">과목 총람</h2>
-        <p class="view-sub">개설 과목 전부를 계열별로 묶어 적습니다. 여석이 5 이하인 과목은 붉게 표시합니다.</p>
+        <p class="view-sub">개설 과목 전체를 전공·교양으로 나눠 보여 줍니다. 여석이 5석 이하인 과목은 빨간색으로 표시합니다.</p>
         <div class="statline" id="ar-stats"></div>
         <div class="sheet table-wrap">
           <table id="ar-table">
@@ -220,7 +220,7 @@
       <section class="view" id="view-notices" aria-labelledby="no-h" tabindex="-1">
         <h2 class="v-h" id="no-h">공지 · 변경</h2>
         <div class="statline" id="nc-stats"></div>
-        <p class="view-sub">수강신청 기간의 게시판. 강의실 변경은 이 원장에 남깁니다.</p>
+        <p class="view-sub">수강신청 기간 공지와 강의실 변경 안내입니다.</p>
         <div class="sheet">
           <ul class="notice-list" id="notice-list"><!-- JS --></ul>
         </div>
@@ -231,7 +231,7 @@
     <dialog id="course-dialog" class="modal modal-split" aria-labelledby="cd-h">
       <div class="mspread">
         <div class="mcover">
-          <span class="mcover-label" aria-hidden="true">COURSE</span>
+          <span class="mcover-label" aria-hidden="true">과목</span>
           <h2 class="mcover-name" id="cd-h">과목명</h2>
           <p class="mcover-meta mono" id="cd-code">CODE · 계열</p>
           <dl class="mcover-stats">
@@ -249,7 +249,7 @@
           <p class="cd-line" id="cd-prof-line">교수 · 강의실</p>
 
           <section class="cd-week msec">
-            <h3>주간 자리</h3>
+            <h3>주간 시간표</h3>
             <div class="cd-strip" id="cd-strip" role="img"></div>
           </section>
 
@@ -344,7 +344,7 @@
 
       const NOTICES = [
         { date: "03-08", kind: "변경", body: "게임이론(ECON315) 강의실이 경상관 308호에서 309호로 바뀝니다. 이 목록에는 이미 반영했습니다." },
-        { date: "03-07", kind: "공지", body: "수강신청 기간은 3월 2일부터 3월 13일 자정까지입니다. 기간 끝에는 시간표가 확정됩니다." },
+        { date: "03-07", kind: "공지", body: "수강신청 기간은 3월 2일부터 3월 13일 자정까지입니다. 기간이 끝나면 시간표가 확정됩니다." },
         { date: "03-06", kind: "안내", body: "기준 학점(18)을 넘는 신청은 학부 사무실의 승인을 받아야 합니다. 이 화면에서는 기준을 넘는 신청을 막습니다." },
         { date: "03-05", kind: "안내", body: "드로잉 입문(ART130)은 재료비 3만 원이 듭니다. 첫 수업에 안내합니다." },
         { date: "03-03", kind: "공지", body: "정원이 마감된 과목은 대기자 신청을 받지 않습니다. 분반 개설은 학부 상황에 따라 결정됩니다." },
@@ -800,7 +800,7 @@
 
         // 주간 자리 — 9:00–18:00 를 세로로 접은 미니 격자
         const strip = $("cd-strip");
-        strip.setAttribute("aria-label", `${timeLabel(c)} — 시간표에 놓이는 자리`);
+        strip.setAttribute("aria-label", `${timeLabel(c)} — 시간표 위치`);
         strip.innerHTML = [1, 2, 3, 4, 5]
           .map((d) => {
             const day = fmtDay(d);

apps/site/public/work/dure-enrollment/styles/main.css

@@ -44,7 +44,9 @@ h3 { font-size: var(--step-0); font-weight: 500; }
 
 :where(p, li, td, th, dd, figcaption) { word-break: keep-all; overflow-wrap: anywhere; }
 
-.mono { font-family: var(--font-mono); font-size: var(--font-mono-size); font-variant-numeric: tabular-nums; }
+/* .mono 는 "수학 심화 B · 3/11 마감"처럼 한글이 섞인 줄에도 쓰인다. 등폭 서체에 두면 한글 사이
+   공백이 등폭 셀 너비로 벌어졌다(레드팀 06 P1-3). 숫자 정렬은 본문 서체의 tabular-nums 로 지킨다 */
+.mono { font-family: var(--font-body); font-size: var(--font-mono-size); font-variant-numeric: tabular-nums; }
 .muted { color: var(--muted-foreground); }
 
 :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }
@@ -754,7 +756,7 @@ kbd {
 /* ── 터치 타깃 — M3 48dp·HIG 44pt 정신의 44px 하한(coarse 포인터에서만) ── */
 @media (pointer: coarse) {
   .chip, .give-btn, .btn-line { min-height: 44px; }
-  .icon-btn, .bell, .modal-close { width: 44px; height: 44px; }
+  .icon-btn, .modal-close { width: 44px; height: 44px; }
   .btn-primary, .btn-star { min-height: 44px; }
   #q { min-height: 44px; }
 }

apps/site/public/work/dure-enrollment/styles/tokens.css

@@ -21,7 +21,9 @@
 
   --font-body: "IBM Plex Sans KR", "Pretendard Variable", -apple-system, sans-serif;
   --font-display: "Noto Serif KR", "IBM Plex Sans KR", serif;
-  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+  /* 한글 글리프가 없는 모노 다음에 본문 한글 서체를 둔다. 그래야 "시험 구간"처럼 한글이 섞인 라벨이
+     시스템 등폭 한글로 떨어져 글자 사이가 벌어지지 않는다(레드팀 06 P1-3). 숫자·라틴만 모노로 남는다 */
+  --font-mono: "JetBrains Mono", "IBM Plex Sans KR", "Pretendard Variable", monospace;
   --font-mono-size: 0.8125rem;
 
   --background: #fafafa;