From 43c75daec63d4b89281bc76bb65087d9f667bdcf Mon Sep 17 00:00:00 2001
From: Godopu <godopu16@gmail.com>
Date: Thu, 30 Jul 2026 22:34:41 +0900
Subject: [PATCH] fix: remove opacity modifiers on Header active badges to
 satisfy WCAG 2.1 AA contrast (R-9.6) and update DESIGN.md

---
 refer_landing_page/components/Header.tsx | 10 +++++-----
 refer_landing_page/docs/DESIGN.md        |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/refer_landing_page/components/Header.tsx b/refer_landing_page/components/Header.tsx
index 29bc9de..85e06fb 100644
--- a/refer_landing_page/components/Header.tsx
+++ b/refer_landing_page/components/Header.tsx
@@ -66,13 +66,13 @@ export default function Header() {
                   aria-current={active ? "page" : undefined}
                   className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-semibold uppercase tracking-[0.18em] transition-all px-3 py-1.5 rounded-md ${
                     active
-                      ? "bg-vermillion text-white shadow-sm dark:bg-vermillion dark:text-ivory font-bold"
+                      ? "bg-vermillion text-white shadow-sm dark:text-ivory font-bold"
                       : "text-ink hover:text-vermillion hover:bg-paper/60"
                   }`}
                 >
                   <span
                     className={`font-display text-[0.62rem] ${
-                      active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
+                      active ? "text-white dark:text-ivory" : "text-ink-mute"
                     }`}
                   >
                     {item.no}
@@ -126,14 +126,14 @@ export default function Header() {
                     aria-current={active ? "page" : undefined}
                     className={`flex items-baseline justify-between px-4 py-3.5 transition-colors rounded-md my-1 ${
                       active
-                        ? "bg-vermillion text-white font-bold dark:bg-vermillion dark:text-ivory shadow-sm"
+                        ? "bg-vermillion text-white font-bold dark:text-ivory shadow-sm"
                         : "text-ink hover:bg-paper/60"
                     }`}
                   >
                     <span className="flex items-baseline gap-3">
                       <span
                         className={`font-display text-xs ${
-                          active ? "text-white/80 dark:text-ivory/80" : "text-ink-mute"
+                          active ? "text-white dark:text-ivory" : "text-ink-mute"
                         }`}
                       >
                         {item.no}
@@ -142,7 +142,7 @@ export default function Header() {
                     </span>
                     <span
                       className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
-                        active ? "text-white/90 dark:text-ivory/90" : "text-ink-mute"
+                        active ? "text-white dark:text-ivory" : "text-ink-mute"
                       }`}
                     >
                       {item.en}
diff --git a/refer_landing_page/docs/DESIGN.md b/refer_landing_page/docs/DESIGN.md
index e659032..cc90823 100644
--- a/refer_landing_page/docs/DESIGN.md
+++ b/refer_landing_page/docs/DESIGN.md
@@ -259,7 +259,7 @@ HeroComposition(props: { className?: string })
 </Reveal>
 ```
 
-> **함께 쓰는 관용구:** 모든 페이지는 `PageHeader`(`components/PageHeader.tsx`)로 시작
+> **함께 쓰는 관용구:** 모든 페이지는 페이지 섹션 헤더
 > → (선택) `Marquee` 밴드 1개 → 통계 밴드(`Counter` ×3, `gap-px bg-line sm:grid-cols-3`)
 > → `Reveal`+`SectionLabel` 로 여는 콘텐츠 섹션. 행 내 스태거는 `delay={i * 80}`~`120`.
 
@@ -269,17 +269,17 @@ HeroComposition(props: { className?: string })
 
 | 라우트 | index | 잡지에서의 역할 | 특징 |
 | --- | --- | --- | --- |
-| `/intro` | 1 | **커버 스프레드** | 거대 한/영 히어로 + `HeroComposition` 아트, 키워드 `Marquee`, 통계, 풀쿼트, 5대 연구 기둥 3+2 매거진 조판 그리드 |
+| `/` | 1 | **커버 스프레드** | 거대 한/영 히어로 + `HeroComposition` 아트, Research Project PageView(3대 과제), 4대 핵심 분야 조판 그리드 |
 | `/members` | 2 | **기고자 페이지(Contributors)** | 인원 통계 카운터, PI 피처 스프레드, 박/석/학부 그룹을 헤어라인 그리드 + 교차 강조색으로 |
 | `/publications` | 3 | **목차/서지(Index & Bibliography)** | 서지 `Marquee`, 파생 통계, 번호 매긴 편집 목록(저널=vermillion, 학회=cobalt) |
-| `/lectures` | 4 | **강의 카탈로그(Course catalog)** | 3개 강의 카드(테두리·강조색 호버 면), 코드·KO/EN 제목·레벨 칩 |
+| `/lectures` | 4 | **강의 카탈로그(Course catalog)** | 45개 학기 학부·대학원 개설 교과목 이력 |
 | `/standardization` | 5 | **표준화 바이라인(Standards byline)** | 기구 `Marquee`, 통계, 기관별 2열 기여 그리드, 기관마다 강조색 배정 |
 
 ---
 
 ## 8. 새 페이지 추가 체크리스트
 
-1. **마스트헤드:** `PageHeader` 로 시작 — `ko`, `en`, 라우트 `index`(intro 1 … standardization 5) 부여.
+1. **내비게이션 배지 & 마스트헤드:** `Header.tsx` 활성 배지(`bg-vermillion text-white dark:text-ivory`, `aria-current="page"`)와 페이지 타이틀 섹션으로 시작.
 2. **콘텐츠 분리:** 편집 데이터 전부를 파일 상단 `// CUSTOMIZATION HOOK` 배열에 둔다.
 3. **레이아웃:** 헤어라인 그리드 관용구(`gap-px bg-line` + 자식 `bg-ivory`)로 구성, 섹션은 `border-b border-ink` 로 구획.
 4. **모션:** 등장 가치가 있는 블록을 `Reveal` 로 감싸고, §2 페어링 규칙대로 vermillion/cobalt 를 교차 배정.