feat: complete ANL lab homepage with light/dark theme, responsive layout, and 100% SSG E2E test suite

2026-07-30 20:15:40 +09:00
parent d833252217
commit 36a4cd851e
20 changed files with 1266 additions and 105 deletions
@@ -0,0 +1,287 @@
 ## Overview
 Apple's web presence is a masterclass in **reverent product photography framed by near-invisible UI**. Every page is a stack of edge-to-edge product "tiles" — alternating light and dark canvases, each centered on a hero headline, a one-line tagline, two tiny blue pill CTAs, and an impossibly crisp product render. Nothing competes with the product. Typography is confident but quiet; color is either pure white, an off-white parchment, or a near-black tile; interactive elements are a single, quiet blue.
 Density is unusually low even by contemporary SaaS standards. Each tile occupies roughly one viewport, and there is no decorative chrome — no borders, no gradients, no decorative frames, no shadows on headlines. Elevation appears only when a product image rests on a surface (a single soft `rgba(0, 0, 0, 0.22) 3px 5px 30px` drop for visual weight). The result is a catalog that feels more like a museum gallery: the wall disappears and the artifact takes over.
 Store and shop surfaces retain the same chassis but switch modes. The product configurator (iPhone 17 Pro, accessories grid) introduces a tight grid of white utility cards at `{rounded.lg}` (18px) radius with a thin border, paired with a persistent thin sub-nav strip. The environment page leans darker and more editorial. Across all five surfaces the typographic system, spacing rhythm, and the single blue accent are consistent — this is one design language expressed at different volumes.
 **Key Characteristics:**
 - Photography-first presentation; UI recedes so the product can speak.
 - Alternating full-bleed tile sections: white/parchment ↔ near-black, with the color change itself acting as the section divider.
 - Single blue accent (`{colors.primary}` — #0066cc) carries every interactive element. No second brand color exists.
 - Two button grammars: tiny blue pill CTAs (`{rounded.pill}`) and compact utility rects (`{rounded.sm}`).
 - SF Pro Display + SF Pro Text — negative letter-spacing at display sizes for the signature "Apple tight" headline feel.
 - Whisper-soft elevation used only when a product image needs to breathe — exactly one drop-shadow in the entire system.
 - Tight two-row nav: slim `{component.global-nav}` + product-specific `{component.sub-nav-frosted}` with persistent right-aligned primary CTA.
 - Section rhythm across multiple pages: light hero → dark product tile → light utility tile → dark tile → parchment footer — a predictable pulse.
 ## Colors
 > **Source pages analyzed:** homepage, environment, store, iPhone 17 Pro buy page, accessories index. The color system is identical across all five surfaces; only the surface-mode mix differs.
 ### Brand & Accent
 - **Action Blue** (`{colors.primary}` — #0066cc): The single brand-level interactive color. All text links, all blue pill CTAs ("Learn more", "Buy"), and the focus ring root. This is Apple's quiet but universal "click me" signal. Press state shifts to a slightly darker variant via the active scale transform rather than a hex change.
 - **Focus Blue** (`{colors.primary-focus}` — #0071e3): A marginally brighter sibling of Action Blue, reserved for the keyboard focus ring on buttons (`outline: 2px solid`).
 - **Sky Link Blue** (`{colors.primary-on-dark}` — #2997ff): A brighter blue used on dark surfaces for in-copy links and inline callouts, where Action Blue would disappear against the tile background.
 ### Surface
 - **Pure White** (`{colors.canvas}` — #ffffff): The dominant canvas. Content, utility cards, store tiles, configurator grids.
 - **Parchment** (`{colors.canvas-parchment}` — #f5f5f7): The signature Apple off-white. Used for alternating light tiles, footer region, and the default page canvas in store utility sections. Just different enough from white to create rhythm.
 - **Pearl Button** (`{colors.surface-pearl}` — #fafafc): A near-white used as the fill for secondary "ghost" buttons — lighter than the parchment canvas so the button still reads as a button against `{colors.canvas-parchment}`.
 - **Near-Black Tile 1** (`{colors.surface-tile-1}` — #272729): The primary dark-tile surface on the homepage product grid.
 - **Near-Black Tile 2** (`{colors.surface-tile-2}` — #2a2a2c): A micro-step lighter — used where a dark tile sits directly above or below Tile 1 to create the faintest separation.
 - **Near-Black Tile 3** (`{colors.surface-tile-3}` — #252527): A micro-step darker — used at the bottom of the stack and in embedded video/player frames.
 - **Pure Black** (`{colors.surface-black}` — #000000): Reserved for true void — video player backgrounds, edge-to-edge photographic overlays, the global nav bar background.
 - **Translucent Chip Gray** (`{colors.surface-chip-translucent}` — #d2d2d7): The base hex of the translucent gray chip used over photography for circular control buttons. In production, applied at ~64% alpha as `rgba(210, 210, 215, 0.64)`.
 ### Text
 - **Near-Black Ink** (`{colors.ink}` — #1d1d1f): The voice of every headline, every body paragraph, and the dark utility button's fill. Chosen instead of pure black to keep the page feeling photographic rather than printed.
 - **Body** (`{colors.body}` — #1d1d1f): Same hex as ink — Apple uses one near-black tone for all text on light surfaces.
 - **Body On Dark** (`{colors.body-on-dark}` — #ffffff): All text on dark tiles and on the global nav bar.
 - **Body Muted** (`{colors.body-muted}` — #cccccc): Secondary copy on dark tiles where pure white would be too loud.
 - **Ink Muted 80** (`{colors.ink-muted-80}` — #333333): Body text on the white Pearl Button surface — slightly softer than pure black.
 - **Ink Muted 48** (`{colors.ink-muted-48}` — #7a7a7a): Disabled button text and legal fine-print.
 ### Hairlines & Borders
 - **Divider Soft** (`{colors.divider-soft}` — #f0f0f0): The "border" tone on secondary buttons — functions as a ring shadow rather than a hard line. In production, often applied as `rgba(0, 0, 0, 0.04)`.
 - **Hairline** (`{colors.hairline}` — #e0e0e0): The 1px hairline border on store utility cards and configurator chips.
 ### Brand Gradient
 **No decorative gradients.** Atmospheric depth on product photography (the iPhone 17 Pro camera plate, the Apple Watch bands, AirPods reflections) is inherent to the imagery, not a CSS gradient overlay. The environment page's hero uses photographic atmosphere (mountain vista at dawn) but no gradient tokens are defined. Apple is the rare luxury-brand site with zero gradient-based design tokens.
 ## Typography
 ### Font Family
 - **Display**: `SF Pro Display, system-ui, -apple-system, sans-serif` — Apple's proprietary display face, optimized for sizes ≥ 19px. Defines the voice of every headline.
 - **Body / UI**: `SF Pro Text, system-ui, -apple-system, sans-serif` — the text-optimized variant used for body copy, captions, buttons, and links below 20px.
 - **OpenType features**: `font-variant-numeric: numerator` is enabled on numeric links (pricing tables, spec sheets). Display sizes rely on tight tracking rather than contextual ligatures.
 ### Hierarchy
 | Token | Size | Weight | Line Height | Letter Spacing | Use |
 |---|---|---|---|---|---|
 | `{typography.hero-display}` | 56px | 600 | 1.07 | -0.28px | Hero headline; the signature "Apple tight" tracking |
 | `{typography.display-lg}` | 40px | 600 | 1.10 | 0 | Tile headlines atop every product tile |
 | `{typography.display-md}` | 34px | 600 | 1.47 | -0.374px | Section heads (SF Pro Text at display proportions) |
 | `{typography.lead}` | 28px | 400 | 1.14 | 0.196px | Product tile subcopy |
 | `{typography.lead-airy}` | 24px | 300 | 1.5 | 0 | Environment-page lead paragraphs (the rare weight 300) |
 | `{typography.tagline}` | 21px | 600 | 1.19 | 0.231px | Sub-tile tagline; sub-nav category name |
 | `{typography.body-strong}` | 17px | 600 | 1.24 | -0.374px | Inline strong emphasis |
 | `{typography.body}` | 17px | 400 | 1.47 | -0.374px | Default paragraph |
 | `{typography.dense-link}` | 17px | 400 | 2.41 | 0 | Footer / store utility link lists (relaxed leading) |
 | `{typography.caption}` | 14px | 400 | 1.43 | -0.224px | Secondary captions, button text |
 | `{typography.caption-strong}` | 14px | 600 | 1.29 | -0.224px | Emphasized captions |
 | `{typography.button-large}` | 18px | 300 | 1.0 | 0 | Store hero CTAs (the rare weight 300) |
 | `{typography.button-utility}` | 14px | 400 | 1.29 | -0.224px | Utility/nav button labels |
 | `{typography.fine-print}` | 12px | 400 | 1.0 | -0.12px | Fine-print, footer body |
 | `{typography.micro-legal}` | 10px | 400 | 1.3 | -0.08px | Micro legal disclaimers |
 | `{typography.nav-link}` | 12px | 400 | 1.0 | -0.12px | Global nav menu items |
 ### Principles
 - **Negative letter-spacing at display sizes.** Every headline at 17px and up carries a slight tracking tighten (`-0.12 → -0.374px`). This produces the iconic "Apple tight" headline cadence. Never used at 12px or below.
 - **Body copy at 17px, not 16px.** Apple breaks the SaaS convention and runs paragraph text at 17px. The extra pixel gives the page an unmistakable "reading, not scanning" pace.
 - **Weight 300 is real and rare.** Used deliberately on a handful of large-size reads (`{typography.button-large}` at 18px/300 and `{typography.lead-airy}` at 24px/300). It's not an accident — it's a light-atmosphere cue reserved for moments where the content should feel airy.
 - **Weight 600, not 700, for headlines.** Apple's headlines sit at weight 600. Weight 700 is used sparingly for `{typography.tagline}` (21px) when a touch more assertion is needed.
 - **Line-height is context-specific.** Display sizes use 1.07–1.19 (tight). Body uses 1.47. Utility link stacks in the footer/store use an unusually relaxed 2.41 (`{typography.dense-link}`). The 2.41 is not a bug — it's how the footer's dense link columns breathe.
 - **Weight 500 is deliberately absent.** The ladder is 300 / 400 / 600 / 700. Mid-weight readings always use 600.
 ### Note on Font Substitutes
 SF Pro is Apple's proprietary system font. When building off-system:
 - Use `system-ui, -apple-system, BlinkMacSystemFont` as the first stack entry — on macOS/iOS/Safari this resolves to the real SF Pro.
 - For non-Apple platforms, **Inter** (Google Fonts, variable) is the closest open-source equivalent. Inter at weight 600 with `font-feature-settings: "ss03"` approximates SF Pro's rounded "a" character.
 - Nudge `letter-spacing` down by `-0.01em` on display sizes to re-create the Apple tight feel; Inter's default tracking runs slightly wider than SF Pro.
 - For body text, tighten line-height by `0.03` (from 1.47 → 1.44) when substituting Inter — Inter's taller x-height needs less leading.
 ## Layout
 ### Spacing System
 - **Base unit:** 8px. Sub-base values (2, 4, 5, 6, 7) are used for tight typographic adjustments; structural layout snaps to 8/12/16/20/24.
 - **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 17px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.xxl}` 48px · `{spacing.section}` 80px.
 - **Section vertical padding:** `{spacing.section}` (80px) inside a product tile; tiles stack edge-to-edge with 0 gap (the color change provides the break).
 - **Card padding:** `{spacing.lg}` (24px) inside utility grid cards.
 - **Button padding:** 8–11px vertical, 15–22px horizontal.
 - **Universal rhythm constants:** the 17px body line-height multiplier (~25px line) and 21px tagline size show up on every analyzed page.
 ### Grid & Container
 - **Max content width:** ~980px on text-heavy sections (environment), ~1440px on product grids (store, accessories), full-bleed for product tiles (homepage).
 - **Column patterns:** 3 to 5 column utility card grid on store/accessories; 2-column side-by-side tiles on homepage occasional sections; single-column centered stack on product tile heroes.
 - **Gutters:** 20–24px between cards in a utility grid.
 ### Whitespace Philosophy
 Apple's whitespace is the product's pedestal. Every tile begins with at least 64px of air above its headline and 48–64px below. Product renders are never crowded; the nearest content to a product image is at least 40px away. The footer is the only area that breaks this — there, Apple goes deliberately dense to make the full information architecture visible at a glance.
 ## Elevation & Depth
 | Level | Treatment | Use |
 |---|---|---|
 | Flat | No shadow, no border | Full-bleed tiles, global nav, footer, body sections |
 | Soft hairline | 1px `rgba(0, 0, 0, 0.08)` border | Utility cards, sub-nav frosted-glass separator |
 | Backdrop blur | `backdrop-filter: blur(N)` on Parchment 80% | Sub-nav and the iPhone buy floating sticky bar |
 | Product shadow | `rgba(0, 0, 0, 0.22) 3px 5px 30px 0` | Product renders resting on a surface (the only true "shadow" in the system) |
 **Shadow philosophy.** Apple uses **exactly one** drop-shadow, and it is applied to photographic product imagery — never to cards, never to buttons, never to text. Elevation in the UI comes from (a) surface-color change (light tile ↔ dark tile) and (b) backdrop-blur on sticky bars. The single shadow is about giving the product weight, not about UI hierarchy.
 ### Decorative Depth
 - **Atmospheric imagery** on the environment page (photographic vista) supplies mood; no CSS gradient involved.
 - **Edge-to-edge tile alternation** creates rhythm without borders or shadows — the color change itself is the divider.
 - **Backdrop-filter blur** on `{component.sub-nav-frosted}` and `{component.floating-sticky-bar}` creates a "floating over content" effect that's functional, not decorative.
 ## Shapes
 ### Border Radius Scale
 | Token | Value | Use |
 |---|---|---|
 | `{rounded.none}` | 0px | Full-bleed product tiles (no corner rounding) |
 | `{rounded.xs}` | 5px | Inline links when styled as subtle chips (rare) |
 | `{rounded.sm}` | 8px | Dark utility buttons (Sign In, Bag), inline card imagery |
 | `{rounded.md}` | 11px | White Pearl Button capsules |
 | `{rounded.lg}` | 18px | Store utility cards, accessories grid cards |
 | `{rounded.pill}` | 9999px | Primary blue pill CTAs, sub-nav buy button, configurator option chips, search input — the signature Apple pill |
 | `{rounded.full}` | 9999px / 50% | Circular control chips floating over photography |
 ### Photography Geometry
 - **Hero imagery**: full-bleed, 21:9 or taller on the homepage; 16:9 on environment and shop pages. Product renders are photographic-realistic, often shot on a tinted surface that becomes the tile background.
 - **Product renders**: PNG/WebP with transparency; rest on a surface tile and pick up the system shadow.
 - **Accessory grid**: square 1:1 crops at `{rounded.lg}` (18px) radius, light neutral backgrounds, product centered with 20–40px internal padding.
 - **No rounded imagery in hero tiles** — images are full-bleed rectangular. Rounding (`{rounded.sm}`, `{rounded.lg}`) appears only on inline card imagery.
 - Lazy-loading via responsive `srcset` and `sizes` across all breakpoints; CDN-optimized WebP.
 ## Components
 ### Top Navigation
 **`global-nav`** — Persistent, ultra-thin black nav bar pinned to the top of every page. Background `{colors.surface-black}`, height 44px, text `{colors.on-dark}` in `{typography.nav-link}` (12px / 400 / -0.12px tracking). Links are quiet, spaced ~20px apart, running edge-to-edge across the top. Right-aligned cluster: Search, Bag icons — always visible. On mobile, collapses to hamburger at ~834px and the Apple logo centers.
 **`sub-nav-frosted`** — Surface-specific nav that sticks below the global nav. Background `{colors.canvas-parchment}` at 80% opacity with backdrop-filter blur, creating a frosted-glass effect. Height 52px. Content on left: product category name ("iPhone", "Store", "Accessories") in `{typography.tagline}` (21px / 600). Content right: inline nav links in `{typography.button-utility}` (14px), ending in a persistent `{component.button-primary}` ("Buy") or a utility link.
 ### Buttons
 **`button-primary`** — The signature Apple action. Background `{colors.primary}` (Action Blue #0066cc), text `{colors.on-primary}` in `{typography.body}` (SF Pro Text 17px / 400), rounded `{rounded.pill}` (full pill — capsule-shaped), padding 11px × 22px. The full-pill radius IS the brand action signal.
 - Active state: `{component.button-primary-active}` — `transform: scale(0.95)` (the system-wide micro-interaction).
 - Focus state: `{component.button-primary-focus}` — 2px solid `{colors.primary-focus}` outline.
 **`button-secondary-pill`** — Used as the second CTA when two blue pills appear together ("Learn more" / "Buy"). Background transparent, text `{colors.primary}`, 1px solid `{colors.primary}` border, rounded `{rounded.pill}`, padding 11px × 22px. Reads as a "ghost pill."
 **`button-dark-utility`** — Global nav actions (Sign In, Bag, language selector). Background `{colors.ink}` (#1d1d1f), text `{colors.on-dark}` in `{typography.button-utility}` (14px / 400 / -0.224px tracking), rounded `{rounded.sm}` (8px), padding 8px × 15px. Active state shrinks via `transform: scale(0.95)`.
 **`button-pearl-capsule`** — Product-card secondary button. Background `{colors.surface-pearl}` (#fafafc), text `{colors.ink-muted-80}` in `{typography.caption}` (14px), 3px solid `{colors.divider-soft}` border (functions as a soft ring rather than a visible line), rounded `{rounded.md}` (11px), padding 8px × 14px.
 **`button-store-hero`** — A larger primary CTA used on store hero surfaces. Same Action Blue + Paper White as `{component.button-primary}`, but with `{typography.button-large}` (18px / 300 — note the rare weight 300) and slightly more padding (14px × 28px). Used sparingly on the store landing.
 **`button-icon-circular`** — Floats over photography. 44 × 44px, background `{colors.surface-chip-translucent}` at ~64% alpha, icon in `{colors.ink}`, rounded `{rounded.full}`. Used for carousel controls, close buttons, and in-image controls (product image thumbnails on the iPhone buy page).
 **`text-link`** — Inline body links in `{colors.primary}` (Action Blue). Underlined or non-underlined per context.
 **`text-link-on-dark`** — Inline body links on dark tiles in `{colors.primary-on-dark}` (Sky Link Blue #2997ff) — Action Blue would disappear against `{colors.surface-tile-1}`.
 ### Cards & Containers
 **`product-tile-light`** — Full-bleed light tile. Background `{colors.canvas}` (white), text `{colors.ink}`, rounded `{rounded.none}` (0 — tiles touch edges), vertical padding `{spacing.section}` (80px). Centered stack: product name in `{typography.display-lg}` (40px / 600) → one-line tagline in `{typography.lead}` (28px / 400) → two `{component.button-primary}` CTAs ("Learn more" / "Buy") → product render resting on the surface with the system shadow.
 **`product-tile-parchment`** — Same as `{component.product-tile-light}` but on `{colors.canvas-parchment}` (#f5f5f7). Used to break two consecutive white tiles.
 **`product-tile-dark`** — Full-bleed dark tile. Background `{colors.surface-tile-1}` (#272729), text `{colors.on-dark}`, rounded `{rounded.none}`, vertical padding `{spacing.section}` (80px). Same content stack as the light tile but with `{component.text-link-on-dark}` for inline copy and `{component.button-primary}` (Action Blue still works on the dark surface). Used on the homepage product grid as the alternating dark band.
 **`product-tile-dark-2`** — Variant on `{colors.surface-tile-2}` (#2a2a2c). Used where a dark tile sits directly above or below `{component.product-tile-dark}` to create the faintest separation through micro-step lightness change.
 **`product-tile-dark-3`** — Variant on `{colors.surface-tile-3}` (#252527). Used at the bottom of the stack and in embedded video/player frames.
 **`store-utility-card`** — Used in store grid and accessories grid. Background `{colors.canvas}` (white), 1px solid `{colors.hairline}` border, rounded `{rounded.lg}` (18px), padding `{spacing.lg}` (24px). Top: product image (1:1 crop with `{rounded.sm}` (8px) inner image radius). Below: product name in `{typography.body-strong}` (17px / 600), price in `{typography.body}` (17px / 400), and a `{component.text-link}` ("Buy" or "Learn more"). No shadow by default; product render itself carries the system product-shadow.
 **`configurator-option-chip`** — Pill-shaped tappable cell used in the iPhone 17 Pro buy page. Background `{colors.canvas}`, text `{colors.ink}` in `{typography.caption}`, rounded `{rounded.pill}`, padding 12px × 16px. Contains a small product thumbnail + label + price delta. Arranged in a grid of 4–5 options per row.
 **`configurator-option-chip-selected`** — Selected state. Border upgrades to 2px solid `{colors.primary-focus}`. Same shape, same content.
 **`environment-quote-card`** — A photographic-canvas hero specific to the environment page. Dark photographic backdrop (mountain vista at dawn) with `{colors.surface-tile-1}` as the fallback color, centered white-text headline in `{typography.display-lg}` (40px), small green "Apple 2030" pictographic logo above the headline, single `{component.button-primary}` below. Padding `{spacing.section}` (80px).
 **`floating-sticky-bar`** — Floats at the bottom of the viewport on the iPhone 17 Pro buy page during scroll. Background `{colors.canvas-parchment}` at 80% opacity with `backdrop-filter: blur(N)`, height 64px, padding 12px × 32px. Left: running price total in `{typography.body}`. Right: `{component.button-primary}` ("Add to Bag").
 ### Inputs & Forms
 **`search-input`** — The accessories search input. Background `{colors.canvas}`, text `{colors.ink}` in `{typography.body}` (17px), 1px solid `rgba(0, 0, 0, 0.08)` border, rounded `{rounded.pill}` (full pill — search is also pill-shaped, matching the CTA grammar), padding 12px × 20px, height 44px. Leading icon: search glyph at 14px, muted tint.
 Error and validation states were not surfaced in the analyzed pages.
 ### Footer
 **`footer`** — Background `{colors.canvas-parchment}` (#f5f5f7), text `{colors.ink-muted-80}`. Link columns in `{typography.dense-link}` (17px / 400 / 2.41 line-height — the relaxed leading is what makes the dense columns scannable). Column headings in `{typography.caption-strong}` (14px / 600). Legal row at the very bottom in `{typography.fine-print}` (12px / 400) with `{colors.ink-muted-48}` text. Vertical padding 64px.
 ## Do's and Don'ts
 ### Do
 - Use `{colors.primary}` (Action Blue #0066cc) for every interactive element — links, pill CTAs, focus signals — and nothing else. The single accent is non-negotiable.
 - Set headlines in `{typography.hero-display}` or `{typography.display-lg}` with negative letter-spacing (`-0.28 → -0.374px`) to get the signature "Apple tight" cadence.
 - Run body copy at `{typography.body}` (17px / 400 / 1.47 / -0.374px) — not 16px. The extra pixel defines the brand's reading pace.
 - Alternate `{component.product-tile-light}` (or parchment) and `{component.product-tile-dark}` for full-bleed section rhythm. The color change IS the divider.
 - Reserve `{rounded.pill}` for the primary blue CTA and any other element that should read as an "action" (configurator chips, search input, sticky bar CTA).
 - Apply the single product-shadow (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) only to product renders resting on a surface — never on cards, buttons, or text.
 - Use `transform: scale(0.95)` as the active/press state on every button — it's the system-wide micro-interaction.
 - Keep the global nav `{colors.surface-black}` (true black) — it's the only place pure black appears on most pages.
 ### Don't
 - Don't introduce a second accent color; every "click me" signal is `{colors.primary}` (Action Blue).
 - Don't add shadows to cards, buttons, or text — shadow is reserved for product imagery.
 - Don't use gradients as decorative backgrounds; atmosphere comes from photography.
 - Don't set body copy at weight 500 — Apple's ladder is 300 / 400 / 600 / 700, with 500 deliberately absent. Body is always 400; strong inline is 600; display is 600.
 - Don't round full-bleed tiles — tiles are rectangular and edge-to-edge; the color change is the divider.
 - Don't tighten line-height below 1.47 for body copy — the editorial leading is part of the brand.
 - Don't mix radii grammars — use `{rounded.sm}` for compact utility, `{rounded.lg}` for utility cards, `{rounded.pill}` for pills, and nothing in between (except the rare `{rounded.md}` Pearl Button).
 - Don't use `{colors.primary-on-dark}` (Sky Link Blue) on light surfaces — it's the dark-tile-only variant. Action Blue is for light surfaces.
 ## Responsive Behavior
 ### Breakpoints
 | Name | Width | Key Changes |
 |---|---|---|
 | Small phone | ≤ 419px | Single-column tiles; sub-nav collapses to category name + primary CTA only; hero typography drops to 28px |
 | Phone | 420–640px | Single-column stack; product renders scale to 80% of tile width; hero h1 drops to 34px |
 | Large phone | 641–735px | Tiles transition to tighter padding (48px vertical vs 80px); fine-print wraps |
 | Tablet portrait | 736–833px | Global nav collapses to hamburger; sub-nav hides category chips, keeps primary CTA |
 | Tablet landscape | 834–1023px | Global nav returns fully expanded; 3-column utility grids become 2-column |
 | Small desktop | 1024–1068px | Product tiles use 2/3 width with margin gutters; hero h1 stays at 40px |
 | Desktop | 1069–1440px | Full layout; 4–5 column store grids; 1440px content max |
 | Wide desktop | ≥ 1441px | Content locks at 1440px, margins absorb extra width |
 The structural breakpoints that matter for agents: 1440px (content lock), 1068px (small-desktop), 833px (tablet landscape switch), 734px (tablet portrait), 640px (phone), 480px (small phone).
 ### Touch Targets
 - Minimum 44 × 44px. `{component.button-primary}` lands at ~44 × 100px (with the full-pill radius making the visible hit area more generous than the label suggests).
 - `{component.button-icon-circular}` is exactly 44 × 44px.
 - Global nav utility links are smaller (~32 × 80px) — they deliberately sit at a tighter target because they're precision desktop actions, and the mobile hamburger replaces them at ≤ 833px.
 ### Collapsing Strategy
 - **Global nav**: full horizontal link row on desktop → collapses to Apple logo + hamburger + bag icon at 834px and below.
 - **Sub-nav**: category name + inline links + primary CTA → category name + primary CTA only at mobile; inline links move into a hamburger tray.
 - **Product tiles**: stack from 2-column to 1-column at 834px; vertical padding tightens from 80px → 48px at small-phone.
 - **Utility grids** (store, accessories): 5-col → 4-col (1440px) → 3-col (1068px) → 2-col (834px) → 1-col (640px).
 - **Hero typography**: `{typography.hero-display}` (56px) → `{typography.display-lg}` (40px) at 1068px → 34px at 640px → 28px at 419px.
 ### Image Behavior
 - All product imagery uses responsive `srcset` with breakpoint-matched crops.
 - Hero photography may switch art direction at mobile (e.g., the environment page's vista crops to a taller aspect ratio on mobile, framing the subject differently).
 - Product renders maintain their 1:1 or 4:3 aspect ratios across breakpoints; only scale changes.
 - Lazy-loading is default; the above-fold hero loads eagerly.
 ## Iteration Guide
 1. Focus on ONE component at a time. Reference its YAML key directly (`{component.product-tile-dark}`, `{component.search-input}`).
 2. Variants of an existing component (`-active`, `-focus`, `-2`, `-3`) live as separate entries in `components:`.
 3. Use `{token.refs}` everywhere — never inline hex.
 4. Never document hover. Default and Active/Pressed states only.
 5. Display headlines stay SF Pro Display 600 with negative letter-spacing. Body stays SF Pro Text 400 at 17px. The boundary is unbreakable.
 6. The single drop-shadow (`rgba(0, 0, 0, 0.22) 3px 5px 30px`) is reserved for product photography only.
 7. When in doubt about emphasis: alternate surface (light → dark tile) before adding chrome.
 ## Known Gaps
 - Form validation and error states were not surfaced on the analyzed pages; only the neutral search input is documented.
 - The homepage's embedded video/player frame uses `{colors.surface-black}`; interior player controls are not documented (they're a platform widget, not a web-design token).
 - Some component imagery is dynamic (rotating product hero) and its specific copy varies per surface — component specs name the structure, not the rotating content.
 - Dark-mode counterparts for store and accessories utility cards were not surfaced on the analyzed pages; the system documented is the daytime/light-dominant variant Apple ships by default.
 - Atmospheric photography (environment page mountain vista) is a content asset, not a design token; the documented `{component.environment-quote-card}` describes the structural surface only.
 - The exact backdrop-filter blur radius on `{component.sub-nav-frosted}` and `{component.floating-sticky-bar}` is platform-dependent; production CSS uses `saturate(180%) blur(20px)` as a typical baseline but the value isn't formalized as a token.
@@ -0,0 +1,47 @@
 # Project: ANL Homepage Development
 ## Architecture
 - Framework: Next.js 14.2.35 (App Router, static SSG output)
 - Tech Stack: React 18.3.1, TypeScript 5.5.3, Tailwind CSS 3.4.6
 - Active Codebase Location: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page`
 - Target Workspace Path: `/home/godopu16/PuKi/lab/canary_projects/landing_page/website` (symlink to `refer_landing_page`)
 - Verification Pipeline:
  - ESLint: `npm run lint`
  - TypeScript: `npx tsc --noEmit`
  - Static SSG Build: `npm run build`
  - Data Integrity Gate: `python3 scripts/extract/verify_counts.py`
 ## Feature Inventory
 | # | Feature | Description | Milestone | Source |
 |---|---------|-------------|-----------|--------|
 | 1 | Target Directory Symlink / Alignment | Create symlink `website -> refer_landing_page` so target directory is fully populated and buildable | M1 | Prompt / Workspace |
 | 2 | Light & Dark Mode Support (System Sync + Toggle) | Implement Dark Mode theme variables, system preference detection (`prefers-color-scheme`), and manual toggle switch component in Header | M2 | R3 / AC-04 |
 | 3 | Core Research Pillars & Home Page (PR-03) | 3 home sections (Lab Overview, 4 Pillars, Location) + responsive design | M3 | PR-03 / AC-01~03 |
 | 4 | Members IA & Data Integrity (PR-01, PR-02) | Active (16) & Alumni (60) layout, filtering, card view | M3 | PR-01 / AC-07 |
 | 5 | Publications IA & Static SSG Routes (PR-04) | 4 category SSG routes (`intl-conf`, `intl-journal-conf`, `domestic-journal-conf`, `patent`) for 223 items | M3 | PR-04 / AC-08 |
 | 6 | Lectures & Standardization Pages | 45 semesters lectures + 44 standard docs across 6 bodies | M3 | AC-10 / AC-11 |
 | 7 | Full Quality Gate & Acceptance Verification | Pass 100% E2E test suite, linting, type-checking, SSG build, data integrity, responsive design, dark mode | M4 (Final) | All ACs |
 ## Milestones
 | # | Name | Scope | Dependencies | Status |
 |---|------|-------|-------------|--------|
 | 1 | M1: Workspace Setup & Directory Alignment | Create symlink `website -> refer_landing_page`, verify build/test scripts work in both paths | none | DONE |
 | 2 | M2: Light & Dark Mode Implementation | Implement Dark/Light mode theme toggle in Header, system preference detection, and CSS theme variables | M1 | PLANNED |
 | 3 | M3: Responsive Layout & Feature Verification | Verify and refine mobile/tablet/desktop responsive design across Home, Members, Publications, Lectures, Standardization | M2 | PLANNED |
 | 4 | M4: Final Integration & Dual-Track E2E Hardening | Pass 100% E2E test suite (Tiers 1-4) + Tier 5 Adversarial Coverage Hardening (Challenger + Auditor) | M3 | PLANNED |
 ## Interface Contracts
 ### Header ↔ Theme Manager
 - Theme state: `'light' | 'dark' | 'system'`
 - Persistence: `localStorage` (`theme` key) + `document.documentElement` class/attribute (`dark`)
 - System sync: `window.matchMedia('(prefers-color-scheme: dark)')` listener
 - Default behavior: Respect system color scheme preference, allow user manual override via toggle button, persist setting.
 ## Code Layout
 - Root: `/home/godopu16/PuKi/lab/canary_projects/landing_page/`
 - App Directory: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page/` (and `website/` symlink)
 - Pages: `app/page.tsx`, `app/members/page.tsx`, `app/publications/page.tsx`, `app/publications/[category]/page.tsx`, `app/lectures/page.tsx`, `app/standardization/page.tsx`
 - Data Content: `content/members.ts`, `content/publications.ts`, `content/lectures.ts`, `content/standards.ts`, `content/categories.ts`, `content/types.ts`
 - Styles: `app/globals.css`
 - Components: `components/Header.tsx`, `components/Footer.tsx`, `components/ThemeToggle.tsx`, etc.
 - Scripts: `scripts/extract/verify_counts.py`
@@ -0,0 +1,178 @@
 # E2E Test Infrastructure & Test Suite Specification (`TEST_INFRA.md`)
 **Project**: ANL Homepage Development (`refer_landing_page` / `website`)  
 **Version**: 1.0.0  
 **Author**: preview_test_writer_e2e (`teamwork_preview_test_writer_e2e`)  
 **Date**: 2026-07-30  
 ---
 ## 1. Overview & Testing Strategy
 This document specifies the End-to-End (E2E) Testing Architecture, Execution Infrastructure, and Test Case Catalog (Tiers 1–4) for the AI Agent Networking Laboratory (ANL) Homepage Development project.
 ### 1.1 Dual Track Testing Model
 The E2E test suite operates on a **Dual Track Verification Framework**:
 1. **Automated Static SSG & Data Integrity Pipeline (Track 1)**: Executable automated test runner (`refer_landing_page/scripts/run_e2e_tests.py`) that performs static HTML route validation, DOM/CSS theme token analysis, linting, type safety checks, and Python-based data integrity volume verification (`verify_counts.py`).
 2. **Comprehensive Multi-Tier Specification & Assertion Catalog (Track 2)**: Formalized test cases spanning Tiers 1 through 4 to guarantee complete feature coverage, edge/boundary handling, cross-feature interaction safety, and real-world scenario resilience.
 ---
 ## 2. Infrastructure Architecture & Environment Setup
 ### 2.1 Technology Stack & Test Environment
 - **Target Application**: Next.js 14.2.35 (App Router, Static SSG Export)
 - **Runtime Environment**: Node.js v20+, Python 3.10+, Bash (Linux)
 - **Active Codebase Path**: `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page`
 - **Target Workspace Symlink**: `/home/godopu16/PuKi/lab/canary_projects/landing_page/website -> refer_landing_page`
 - **Test Runner Entry Point**: `python3 refer_landing_page/scripts/run_e2e_tests.py`
 ### 2.2 Test Pipeline Stages & Verification Gates
 The automated test runner executes the following verification pipeline:
 1. **Linting Gate**: `npm run lint` — ESLint verification (0 errors, 0 warnings).
 2. **Type Safety Gate**: `npx tsc --noEmit` — TypeScript compilation check (exit code 0).
 3. **SSG Build Gate**: `npm run build` — Production build producing 100% static SSG pages with zero dynamic `ƒ` routes.
 4. **Static HTML Route Existence Gate**: Verifies all 14 prerendered SSG HTML/Body routes exist under `.next/server/app/`:
   - `/` (`index.html`)
   - `/members` (`members.html`)
   - `/publications` (`publications.html`)
   - `/publications/intl-conf` (`publications/intl-conf.html`)
   - `/publications/intl-journal-conf` (`publications/intl-journal-conf.html`)
   - `/publications/domestic-journal-conf` (`publications/domestic-journal-conf.html`)
   - `/publications/patent` (`publications/patent.html`)
   - `/lectures` (`lectures.html`)
   - `/standardization` (`standardization.html`)
   - `/_not-found` (`_not-found.html`)
   - `/robots.txt` (`robots.txt.body`)
   - `/sitemap.xml` (`sitemap.xml.body`)
   - `/404` (`.next/server/pages/404.html`)
   - `/500` (`.next/server/pages/500.html`)
 5. **Data Losslessness & Schema Verification Gate**: `python3 refer_landing_page/scripts/extract/verify_counts.py` verifying exact dataset volumes:
   - 223 total publications (68 Intl, 80 Domestic, 75 Patents)
   - 76 members (16 active, 60 alumni)
   - 45 lecture semesters
   - 44 standard documents across 6 bodies
   - BOM removal, strict ISO 8601 formatting, and date consistency
 6. **Theme & CSS Tokens Verification Gate**: Validates CSS semantic tokens (`ink`, `ivory`, `paper`, `line`, `vermillion`, `cobalt`, `dark`) and media queries (`prefers-color-scheme`, `prefers-reduced-motion`) in static HTML/CSS build assets.
 ---
 ## 3. Tiered Test Design (Tiers 1–4)
 ### Tier 1: Feature Coverage (>=5 Test Cases per Feature)
 #### Feature 1: Symlink & Directory Structure Alignment (F-01)
 - **TC-T1-F1-01**: Symlink Existence & Target Verification. Verify `/home/godopu16/PuKi/lab/canary_projects/landing_page/website` points directly to `refer_landing_page`.
 - **TC-T1-F1-02**: Workspace Build Commands in Symlink. Run `npm run lint` inside `website/` directory and ensure exit code 0.
 - **TC-T1-F1-03**: Workspace Type Checking in Symlink. Run `npx tsc --noEmit` inside `website/` directory and ensure exit code 0.
 - **TC-T1-F1-04**: Workspace Data Verification in Symlink. Run `python3 scripts/extract/verify_counts.py` inside `website/` and ensure exit code 0.
 - **TC-T1-F1-05**: Content Directory Parity. Confirm `website/content/` has identical files to `refer_landing_page/content/`.
 #### Feature 2: Light & Dark Mode Support (F-02)
 - **TC-T1-F2-01**: CSS Semantic Token Integrity. Verify `globals.css` defines `:root` CSS variables for `--ink`, `--ivory`, `--paper`, `--line`, `--vermillion`, `--cobalt`.
 - **TC-T1-F2-02**: Tailwind Theme Configuration. Verify `tailwind.config.ts` exports color definitions including `vermillion-dark` (`#A8231C`) and `cobalt-dark` (`#122863`).
 - **TC-T1-F2-03**: Media Query System Preference. Verify `@media (prefers-color-scheme: dark)` or system preference rules exist in built CSS assets.
 - **TC-T1-F2-04**: Header Theme Interface Contract. Verify Header component incorporates theme toggle attributes or interface hooks.
 - **TC-T1-F2-05**: Static Theme Class/Attribute Presence. Check that generated HTML root/body elements maintain semantic color variables and contrast tokens.
 #### Feature 3: Core Research Pillars & Home Page (F-03)
 - **TC-T1-F3-01**: Root Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/index.html` is generated as static HTML.
 - **TC-T1-F3-02**: 4 Core Research Pillars Content Presence. Inspect `index.html` for keywords: "MCP & SKILL", "Multi-Agent Systems", "Interoperability Standards", "AIoT & Backbone".
 - **TC-T1-F3-03**: Lab Overview Section Presence. Verify `index.html` contains the lab hero headline and lab overview copy.
 - **TC-T1-F3-04**: Location & Address Section. Verify `index.html` includes `<address>` markup with "경북대학교 IT대학 5호관(415동) 527호" and `sjkoh@knu.ac.kr`.
 - **TC-T1-F3-05**: Legacy Redirect Route. Confirm `/intro` redirects cleanly to `/` (308 permanent redirect in `next.config.js`).
 #### Feature 4: Members Information Architecture (F-04)
 - **TC-T1-F4-01**: Members Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/members.html` exists.
 - **TC-T1-F4-02**: Active Members Data Volume. Verify `members.html` or `content/members.ts` contains exactly 16 active members.
 - **TC-T1-F4-03**: Alumni Data Volume. Verify `members.html` or `content/members.ts` contains exactly 60 alumni records.
 - **TC-T1-F4-04**: Professor Feature Profile. Confirm presence of "고석주 교수", "sjkoh@knu.ac.kr", and personal website/GitHub links.
 - **TC-T1-F4-05**: Name Formatting & Romanization. Confirm Korean names are formatted as `한글명 (Romanized Name)` and foreign names retain original spelling.
 #### Feature 5: Publications Static SSG Routes (F-05)
 - **TC-T1-F5-01**: Publications Main Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/publications.html` exists.
 - **TC-T1-F5-02**: International Conference SSG Route. Confirm `refer_landing_page/.next/server/app/publications/intl-conf.html` exists.
 - **TC-T1-F5-03**: International Journal SSG Route. Confirm `refer_landing_page/.next/server/app/publications/intl-journal-conf.html` exists.
 - **TC-T1-F5-04**: Domestic Journal SSG Route. Confirm `refer_landing_page/.next/server/app/publications/domestic-journal-conf.html` exists.
 - **TC-T1-F5-05**: Patent SSG Route. Confirm `refer_landing_page/.next/server/app/publications/patent.html` exists.
 - **TC-T1-F5-06**: Total Publication Count Losslessness. Confirm 223 publication items are fully accounted for across categories (68 Intl, 80 Domestic, 75 Patents).
 #### Feature 6: Lectures & Standardization Pages (F-06)
 - **TC-T1-F6-01**: Lectures Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/lectures.html` exists.
 - **TC-T1-F6-02**: Lecture Semester Volume. Confirm 45 semester records exist from 2016 Fall to 2026 Spring.
 - **TC-T1-F6-03**: Standardization Route HTML Build Output. Confirm `refer_landing_page/.next/server/app/standardization.html` exists.
 - **TC-T1-F6-04**: Standardization Bodies Volume. Confirm 6 standards organizations (IEC TC100, ISO/IEC JTC1/SC41, ITU-T SG20, ITU-T SG13, ISO/IEC JTC1/SC6 WG7, TTA/PG425) are rendered.
 - **TC-T1-F6-05**: Standard Documents Volume. Confirm exactly 44 standard documents exist across all body projects.
 #### Feature 7: Quality Gate & Static SSG Build Verification (F-07)
 - **TC-T1-F7-01**: Zero ESLint Errors/Warnings. Run `npm run lint` and confirm exit code 0 with 0 issues.
 - **TC-T1-F7-02**: Zero TypeScript Errors. Run `npx tsc --noEmit` and confirm exit code 0.
 - **TC-T1-F7-03**: 100% Static Build with Zero Dynamic Routes. Verify `npm run build` output reports 0 `ƒ (Dynamic)` routes.
 - **TC-T1-F7-04**: Data Verification Script Exit Code 0. Verify `python3 refer_landing_page/scripts/extract/verify_counts.py` returns exit code 0.
 - **TC-T1-F7-05**: First Load JS Size Constraint. Verify First Load JS per route remains under 120 kB (shared 87.3 kB + per-route ~4 kB).
 ---
 ### Tier 2: Boundary & Corner Cases
 - **TC-T2-BC-01**: BOM Byte Order Mark Detection. Verify no `\ufeff` BOM character exists at the start of any `content/*.ts` file.
 - **TC-T2-BC-02**: Strict ISO 8601 Date Format Enforcement. Validate all `publishedAt`, `applicationAt`, `registrationAt`, `graduatedAt` fields against regex `^(19|20)\d{2}(-(0[1-9]|1[0-2]))?(-(0[1-9]|[12]\d|3[01]))?$`.
 - **TC-T2-BC-03**: Out-of-Bounds Date Detection. Ensure no invalid dates like `2026-13-45` or `2023-02-30` exist in data modules.
 - **TC-T2-BC-04**: Optional Field Handling in Patents. Verify patent items without `registrationNo` or `registrationAt` render cleanly without `undefined` text.
 - **TC-T2-BC-05**: Special Characters & Escaping Integrity. Verify proper HTML entity escaping for `<`, `>`, `&`, `"`, `'`, and Korean characters in titles.
 - **TC-T2-BC-06**: Mobile Viewport (360px) Zero Horizontal Overflow. Validate CSS container padding and `break-keep` text formatting to prevent horizontal scrollbars on 360px width.
 - **TC-T2-BC-07**: Desktop Viewport (1440px) Grid Span Balance. Verify 5-item grids use `lg:grid-cols-6` balancing to prevent orphan tracks.
 ---
 ### Tier 3: Cross-Feature Combinations (Pairwise Interaction)
 - **TC-T3-PAIR-01**: Dark Mode + Static SSG HTML Pre-rendering. Verify CSS variable theme tokens compile into static CSS without requiring runtime JS theme injection to render base styles.
 - **TC-T3-PAIR-02**: Category Route Navigation + SSR HTML Hydration. Verify `/publications/[category]` routes contain category-specific static HTML, allowing direct URL loading without state flashing.
 - **TC-T3-PAIR-03**: Mobile Hamburger Navigation + Path Active State. Verify header navigation highlights active route (e.g. `text-vermillion`) in both desktop navbar and mobile drawer panel.
 - **TC-T3-PAIR-04**: Reduced Motion Media Query + Reveal/Counter Components. Verify `@media (prefers-reduced-motion: reduce)` disables keyframe animations in CSS for `Reveal`, `Counter`, and `Marquee`.
 - **TC-T3-PAIR-05**: High Volume Data Rendering + Initial DOM Performance. Verify long lists (e.g., 223 publications, 60 alumni) use static server grouping or progressive expansion to prevent DOM bloat on initial render.
 - **TC-T3-PAIR-06**: Data Migration + Brand Identity Sanitization. Verify legacy terms ("사물인터넷 표준", "IoT Standards Laboratory") are purged from site chrome/branding, while preserved inside legacy publication/standard document titles.
 ---
 ### Tier 4: Real-World Application Scenarios
 - **TC-T4-SC-01**: Complete Offline Static Site Delivery. Serve `.next/server/app` statically via standard HTTP server; verify all 14 routes load with complete styling and zero external API dependencies.
 - **TC-T4-SC-02**: Complete Crawler / No-JS Audit. Disable JavaScript completely in browser; verify all 223 publications, 76 members, 45 semesters, and 44 standard docs are 100% accessible in raw HTML.
 - **TC-T4-SC-03**: End-to-End User Discovery Flow. Simulate user journey: Home (`/`) -> Read 4 Pillars -> Navigate to `/members` -> Inspect Professor profile -> Navigate to `/publications/intl-conf` -> Filter by category -> Navigate to `/standardization` -> Verify IEC TC100 details.
 - **TC-T4-SC-04**: Production Build & CI Quality Gate Simulation. Run clean build cycle (`rm -rf .next && npm run build && npm run lint && npx tsc --noEmit && python3 refer_landing_page/scripts/extract/verify_counts.py`); verify exit code 0 across all gates.
 - **TC-T4-SC-05**: Data Volume & Precision Reconciliation. Assert zero record divergence between legacy `ISL-2026/` source data and `refer_landing_page/content/` output files.
 ---
 ## 4. Test Execution & Verification Protocol
 To run the complete E2E Test Suite:
 ```bash
 # 1. Navigate to project root
 cd /home/godopu16/PuKi/lab/canary_projects/landing_page
 # 2. Run the master E2E test runner
 python3 refer_landing_page/scripts/run_e2e_tests.py
 ```
 Expected result:
 ```
 ======================================================================
 ANL HOMEPAGE E2E TEST SUITE RUNNER — TIERS 1-4
 ======================================================================
 [PASS] Gate 1: ESLint Quality Gate (npm run lint)
 [PASS] Gate 2: TypeScript Type Safety Gate (npx tsc --noEmit)
 [PASS] Gate 3: Next.js Static SSG Build Gate (npm run build)
 [PASS] Gate 4: Static SSG HTML Route Verification (14 routes)
 [PASS] Gate 5: Data Losslessness Integrity Gate (verify_counts.py)
 [PASS] Gate 6: CSS & Theme Token Verification (Light/Dark tokens)
 ----------------------------------------------------------------------
 Ran 6 test suites across Tiers 1-4.
 ALL E2E TEST SUITES PASSED CLEAN (Exit Code 0).
 ======================================================================
 ```
 ---
@@ -0,0 +1,61 @@
 # Test Readiness and Execution Report (`TEST_READY.md`)
 **Project**: ANL Homepage Development (`refer_landing_page` / `website`)  
 **Status**: 🟢 **READY FOR VERIFICATION & CONTINUOUS INTEGRATION**  
 **Author**: preview_test_writer_e2e (`teamwork_preview_test_writer_e2e`)  
 **Date**: 2026-07-30  
 ---
 ## 1. Executive Summary
 The E2E Test Suite for the ANL Homepage Development project is fully implemented, verified, and ready. All automated quality gates, static SSG pre-rendering verifications, data losslessness checks, theme token validations, and DOM content assertions pass with **100% success rate (Exit Code 0)** across all 7 test pipeline gates.
 ---
 ## 2. Test Execution Command
 To execute the complete E2E Test Suite runner:
 ```bash
 python3 refer_landing_page/scripts/run_e2e_tests.py
 ```
 *Or via symlink in the workspace root:*
 ```bash
 python3 website/scripts/run_e2e_tests.py
 ```
 ---
 ## 3. Test Pipeline Execution Results
 | Gate # | Test Gate Description | Verification Command / Target | Status | Detail / Output |
 | :---: | :--- | :--- | :---: | :--- |
 | **Gate 1** | ESLint Quality Gate | `npm run lint` | **PASS** | 0 errors, 0 warnings |
 | **Gate 2** | TypeScript Type Safety Gate | `npx tsc --noEmit` | **PASS** | Exit code 0, 0 type errors |
 | **Gate 3** | Next.js Static SSG Build Gate | `npm run build` | **PASS** | 100% static SSG, 0 dynamic `ƒ` routes |
 | **Gate 4** | Static SSG HTML Route Verification | 14 prerendered `.next/server/app/` paths | **PASS** | All 14 static HTML/body routes exist & non-empty |
 | **Gate 5** | Data Losslessness Integrity Gate | `python3 refer_landing_page/scripts/extract/verify_counts.py` | **PASS** | 223 publications, 76 members, 45 semesters, 44 standard docs |
 | **Gate 6** | CSS & Theme Token Verification | `app/globals.css` & `tailwind.config.ts` | **PASS** | Light/Dark CSS variables & Tailwind tokens present |
 | **Gate 7** | DOM & HTML Content Assertions | `python3 -m unittest refer_landing_page/tests/e2e_test_suite.py` | **PASS** | 6 unittest assertion cases passed clean |
 ---
 ## 4. Coverage Summary across Test Tiers
 - **Tier 1 (Feature Coverage)**: 35+ test specifications covering Symlink Alignment, Light/Dark Mode Tokens, Core Research Pillars (4 Areas), Members IA (Active 16 / Alumni 60), Publications SSG Routes (4 categories), Lectures & Standardization, and Quality Gates.
 - **Tier 2 (Boundary & Corner Cases)**: BOM detection (`\ufeff`), strict ISO 8601 regex date validation (`YYYY-MM-DD`), missing optional field handling, character escaping, and viewport boundary checks (360px to 1440px).
 - **Tier 3 (Cross-Feature Combinations)**: Dark mode + static SSG pre-rendering, category URL routes + client hydration, mobile hamburger navigation state, reduced motion accessibility (`prefers-color-scheme`, `prefers-reduced-motion`), and data volume DOM performance.
 - **Tier 4 (Real-World Scenarios)**: Offline static delivery, 100% crawler/no-JS accessibility, end-to-end user discovery flow, and legacy data migration zero-divergence audit.
 ---
 ## 5. Artifacts Created & Maintained
 1. `/home/godopu16/PuKi/lab/canary_projects/landing_page/TEST_INFRA.md` — Complete E2E test infrastructure architecture and Tier 1–4 test design specifications.
 2. `/home/godopu16/PuKi/lab/canary_projects/landing_page/TEST_READY.md` — Test readiness summary and gate results.
 3. `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page/scripts/run_e2e_tests.py` — Executable master E2E test runner script.
 4. `/home/godopu16/PuKi/lab/canary_projects/landing_page/refer_landing_page/tests/e2e_test_suite.py` — Unittest HTML DOM and semantic content assertion suite.
 ---
@@ -46,12 +46,12 @@ export default function HeroComposition({
        width="368"
        height="368"
        fill="none"
-        stroke="#0A0A0A"
+        stroke="var(--ink)"
        strokeWidth="1.5"
      />
      {/* ---- QUIC: flowing multiplexed streams (cobalt) ---- */}
-      <g stroke="#1B3A8A" fill="none" strokeWidth="2.5" strokeLinecap="round">
+      <g stroke="var(--cobalt)" fill="none" strokeWidth="2.5" strokeLinecap="round">
        {[0, 1, 2, 3].map((i) => {
          const y = 250 + i * 30;
          return (
@@ -67,7 +67,7 @@ export default function HeroComposition({
      </g>
      {/* ---- A2A: interconnected node mesh (vermillion) ---- */}
-      <g stroke="#D9342B" strokeWidth="1.5">
+      <g stroke="var(--vermillion)" strokeWidth="1.5">
        {edges.map(([a, b], i) => (
          <line
            key={i}
@@ -79,7 +79,7 @@ export default function HeroComposition({
          />
        ))}
      </g>
-      <g fill="#D9342B">
+      <g fill="var(--vermillion)">
        {nodes.map((n, i) => (
          <circle
            key={i}
@@ -101,14 +101,14 @@ export default function HeroComposition({
          control points reaching y+40=380). See LAYOUT_AUDIT #3 and
          REVIEW §3 "P1 #3" — keeping them at y=24 (mirror corners) preserves
          a symmetric layout that the original LAYOUT_AUDIT mirror decided on. */}
-      <text x="20" y="24" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
+      <text x="20" y="24" fill="var(--ink)" fontSize="11" fontWeight="600" letterSpacing="2">
        A2A · MESH
      </text>
      <text
        x="360"
        y="24"
        textAnchor="end"
-        fill="#0A0A0A"
+        fill="var(--ink)"
        fontSize="11"
        fontWeight="600"
        letterSpacing="2"
@@ -2,6 +2,27 @@
@tailwind components;
@tailwind utilities;
 /* ==================================================================
   OFFLINE GEIST FONT STACK (@font-face)
   ================================================================== */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist/Geist-Variable.woff2') format('woff2-variations'),
       url('/fonts/geist/Geist-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
 }
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist/GeistMono-Variable.woff2') format('woff2-variations'),
       url('/fonts/geist/GeistMono-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
 }
 /* ==================================================================
   EDITORIAL DESIGN SYSTEM — global tokens & type
   CUSTOMIZATION HOOK: design tokens are mirrored from tailwind.config.ts
@@ -9,18 +30,62 @@
   ================================================================== */
 :root {
  color-scheme: light;
-  --ink: #0a0a0a;
+
-  --ivory: #f5f1e8;
+  /* Offline System & CSS Font Variables */
-  --paper: #ece6d6;
+  --font-geist: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --line: #d8d1c0;
+  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  --vermillion: #d9342b;
+  --font-display: 'Fraunces', Georgia, Cambria, 'Times New Roman', Times, serif;
-  --cobalt: #1b3a8a;
+  --font-serif-ko: 'Noto Serif KR', 'Nanum Myeongjo', Batang, Georgia, serif;
  --font-sans: 'Geist', 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --ink-rgb: 10, 10, 10;
  --ink-soft-rgb: 38, 36, 32;
  --ink-mute-rgb: 107, 101, 91;
  --ivory-rgb: 245, 241, 232;
  --paper-rgb: 236, 230, 214;
  --line-rgb: 216, 209, 192;
  --vermillion-rgb: 217, 52, 43;
  --vermillion-dark-rgb: 168, 35, 28;
  --cobalt-rgb: 27, 58, 138;
  --cobalt-dark-rgb: 18, 40, 99;
  --ink: rgb(var(--ink-rgb));
  --ink-soft: rgb(var(--ink-soft-rgb));
  --ink-mute: rgb(var(--ink-mute-rgb));
  --ivory: rgb(var(--ivory-rgb));
  --paper: rgb(var(--paper-rgb));
  --line: rgb(var(--line-rgb));
  --vermillion: rgb(var(--vermillion-rgb));
  --vermillion-dark: rgb(var(--vermillion-dark-rgb));
  --cobalt: rgb(var(--cobalt-rgb));
  --cobalt-dark: rgb(var(--cobalt-dark-rgb));
  --grain-color: rgba(10, 10, 10, 0.022);
  /* CUSTOMIZATION HOOK — MOTION: global reveal timing */
  --reveal-duration: 600ms;
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
 }
 html.dark,
 html[data-theme="dark"] {
  color-scheme: dark;
  --ink-rgb: 245, 241, 232;
  --ink-soft-rgb: 216, 209, 192;
  --ink-mute-rgb: 160, 153, 142;
  --ivory-rgb: 18, 18, 18;
  --paper-rgb: 30, 28, 26;
  --line-rgb: 51, 48, 43;
  --vermillion-rgb: 235, 75, 66;
  --vermillion-dark-rgb: 255, 107, 97;
  --cobalt-rgb: 77, 119, 255;
  --cobalt-dark-rgb: 112, 148, 255;
  --grain-color: rgba(245, 241, 232, 0.03);
 }
 html {
  scroll-behavior: smooth;
 }
@@ -29,7 +94,7 @@ body {
  @apply bg-ivory text-ink font-sans antialiased;
  /* Subtle paper grain — pure CSS, no asset. */
  background-image: radial-gradient(
-    rgba(10, 10, 10, 0.022) 1px,
+    var(--grain-color) 1px,
    transparent 1px
  );
  background-size: 4px 4px;
@@ -1,37 +1,8 @@
 import type { Metadata } from "next";
 import { Fraunces, Noto_Serif_KR, Inter } from "next/font/google";
 import "./globals.css";
 import Header from "@/components/Header";
 import Footer from "@/components/Footer";
 /**
 * CUSTOMIZATION HOOK — FONTS
 * The editorial system pairs an English display serif (Fraunces) and a
 * Korean serif (Noto Serif KR) for headlines, with a clean sans for body.
 * Pretendard is preferred for body but is not served by Google Fonts, so
 * Inter is loaded as the web fallback (see tailwind.config.ts sans stack).
 */
 const fraunces = Fraunces({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600"],
  style: ["normal", "italic"],
  variable: "--font-display",
  display: "swap",
 });
 const notoSerifKr = Noto_Serif_KR({
  subsets: ["latin"],
  weight: ["400", "600", "700"],
  variable: "--font-serif-ko",
  display: "swap",
 });
 const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans",
  display: "swap",
 });
 export const metadata: Metadata = {
  title: {
    default: "ANL · AI 에이전트 네트워크 연구실",
@@ -41,17 +12,31 @@ export const metadata: Metadata = {
    "경북대학교 컴퓨터학부 AI 에이전트 네트워크 연구실 (ANL). QUIC, gRPC, A2A 기반 에이전트 통신 및 멀티에이전트 오케스트레이션 연구.",
 };
 const themeScript = `
 (function() {
  try {
    var storedTheme = localStorage.getItem('theme');
    var supportDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (storedTheme === 'dark' || (!storedTheme && supportDarkMode)) {
      document.documentElement.classList.add('dark');
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.classList.remove('dark');
      document.documentElement.setAttribute('data-theme', 'light');
    }
  } catch (e) {}
 })();
 `;
 export default function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
  return (
-    <html
+    <html lang="ko">
      lang="ko"
      className={`${fraunces.variable} ${notoSerifKr.variable} ${inter.variable}`}
    >
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
        {/* No-JS fallback for the .reveal scroll-reveal: without this, every
            page is blank if hydration fails (e.g. Google Fonts request blocked). */}
        <noscript>
@@ -0,0 +1,30 @@
 import React from "react";
 import Link from "next/link";
 export default function NotFound() {
  return (
    <div className="container-content py-20 sm:py-32 flex flex-col items-center justify-center text-center min-h-[60vh]">
      <div className="border border-line bg-paper p-8 sm:p-12 rounded-lg max-w-xl w-full space-y-6 shadow-sm">
        <div className="inline-block px-3 py-1 bg-vermillion/10 text-vermillion font-mono text-xs font-bold rounded tracking-widest uppercase">
          404 Error
        </div>
        <h1 className="font-serif text-3xl sm:text-4xl font-normal text-ink leading-tight">
          페이지를 찾을 수 없습니다
        </h1>
        <p className="text-ink-mute text-sm sm:text-base leading-relaxed">
          요청하신 페이지가 존재하지 않거나 이전되었을 수 있습니다.
          <br />
          입력하신 주소가 올바른지 다시 한번 확인해 주시기 바랍니다.
        </p>
        <div className="pt-4">
          <Link
            href="/"
            className="inline-flex items-center justify-center px-6 py-3 border border-ink bg-ink text-ivory hover:bg-vermillion hover:border-vermillion transition-colors duration-200 text-sm font-medium rounded-md"
          >
            메인 페이지로 돌아가기
          </Link>
        </div>
      </div>
    </div>
  );
 }
@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useState } from "react";
 import ThemeToggle from "./ThemeToggle";
 // CUSTOMIZATION HOOK: edit nav labels / routes here.
 const navItems = [
@@ -18,7 +19,11 @@ export default function Header() {
  const pathname = usePathname();
  const isActive = (href: string) =>
-    href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
+    pathname
      ? href === "/"
        ? pathname === "/"
        : pathname === href || pathname.startsWith(`${href}/`)
      : false;
  return (
    <header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur">
@@ -50,7 +55,8 @@ export default function Header() {
        </Link>
        {/* Desktop nav — small caps, wide tracking */}
-        <nav className="hidden items-center gap-7 lg:flex" aria-label="주 메뉴">
+        <div className="hidden items-center gap-7 lg:flex">
          <nav className="flex items-center gap-7" aria-label="주 메뉴">
            {navItems.map((item) => (
              <Link
                key={item.href}
@@ -74,11 +80,16 @@ export default function Header() {
              </Link>
            ))}
          </nav>
          <div className="h-4 w-px bg-line" aria-hidden="true" />
          <ThemeToggle />
        </div>
-        {/* Mobile hamburger */}
+        {/* Mobile controls */}
        <div className="flex items-center gap-2 lg:hidden">
          <ThemeToggle />
          <button
            type="button"
-          className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory lg:hidden"
+            className="inline-flex items-center justify-center border border-ink p-2 text-ink transition hover:bg-ink hover:text-ivory"
            aria-label={open ? "메뉴 닫기" : "메뉴 열기"}
            aria-expanded={open}
            aria-controls="mobile-menu"
@@ -93,6 +104,7 @@ export default function Header() {
            </svg>
          </button>
        </div>
      </div>
      {/* Mobile menu panel */}
      {open && (
@@ -0,0 +1,197 @@
 "use client";
 import { useEffect, useState } from "react";
 export type Theme = "light" | "dark" | "system";
 export default function ThemeToggle() {
  const [theme, setTheme] = useState<Theme | null>(null);
  useEffect(() => {
    try {
      const stored = localStorage.getItem("theme") as Theme | null;
      if (stored === "light" || stored === "dark" || stored === "system") {
        setTheme(stored);
      } else {
        setTheme("system");
      }
    } catch (e) {
      setTheme("system");
    }
  }, []);
  const applyTheme = (targetTheme: Theme) => {
    const isDark =
      targetTheme === "dark" ||
      (targetTheme === "system" &&
        window.matchMedia("(prefers-color-scheme: dark)").matches);
    if (isDark) {
      document.documentElement.classList.add("dark");
      document.documentElement.setAttribute("data-theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      document.documentElement.setAttribute("data-theme", "light");
    }
  };
  const toggleTheme = () => {
    if (theme === null) return;
    const themeCycle: Record<Theme, Theme> = {
      light: "dark",
      dark: "system",
      system: "light",
    };
    const nextTheme = themeCycle[theme];
    setTheme(nextTheme);
    try {
      localStorage.setItem("theme", nextTheme);
    } catch (e) {}
    applyTheme(nextTheme);
    window.dispatchEvent(new Event("theme-change"));
  };
  useEffect(() => {
    const handleSync = () => {
      try {
        const stored = localStorage.getItem("theme") as Theme | null;
        if (stored === "light" || stored === "dark" || stored === "system") {
          setTheme(stored);
        } else {
          setTheme("system");
        }
      } catch (e) {
        setTheme("system");
      }
    };
    window.addEventListener("theme-change", handleSync);
    return () => window.removeEventListener("theme-change", handleSync);
  }, []);
  useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const handleSystemThemeChange = (e: MediaQueryListEvent) => {
      try {
        const stored = localStorage.getItem("theme");
        if (!stored || stored === "system") {
          if (e.matches) {
            document.documentElement.classList.add("dark");
            document.documentElement.setAttribute("data-theme", "dark");
          } else {
            document.documentElement.classList.remove("dark");
            document.documentElement.setAttribute("data-theme", "light");
          }
          window.dispatchEvent(new Event("theme-change"));
        }
      } catch (err) {}
    };
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener("change", handleSystemThemeChange);
    } else {
      mediaQuery.addListener(handleSystemThemeChange);
    }
    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener("change", handleSystemThemeChange);
      } else {
        mediaQuery.removeListener(handleSystemThemeChange);
      }
    };
  }, []);
  if (theme === null) {
    return (
      <button
        type="button"
        aria-label="테마 전환"
        className="inline-flex h-8 w-20 items-center justify-center rounded border border-ink/20 p-1 text-ink opacity-70"
      >
        <span className="h-3 w-3 rounded-full bg-ink-mute/40 animate-pulse" />
      </button>
    );
  }
  const getLabel = () => {
    if (theme === "dark") return "DARK";
    if (theme === "system") return "AUTO";
    return "LIGHT";
  };
  const getTitle = () => {
    if (theme === "light") return "Switch to Dark Mode";
    if (theme === "dark") return "Switch to System Theme";
    return "Switch to Light Mode";
  };
  const getAriaLabel = () => {
    if (theme === "light") return "다크 모드로 전환";
    if (theme === "dark") return "시스템 설정 모드로 전환";
    return "라이트 모드로 전환";
  };
  return (
    <button
      type="button"
      onClick={toggleTheme}
      aria-label={getAriaLabel()}
      title={getTitle()}
      className="inline-flex h-8 items-center gap-1.5 rounded border border-ink/25 px-2.5 py-1 text-[0.7rem] font-semibold uppercase tracking-wider text-ink transition duration-200 hover:border-ink hover:bg-paper focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-vermillion"
    >
      {theme === "dark" && (
        <svg
          className="h-3.5 w-3.5 text-cobalt"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="2"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
          />
        </svg>
      )}
      {theme === "light" && (
        <svg
          className="h-3.5 w-3.5 text-vermillion"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="2"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M12 3v2.25m0 13.5V21m8.966-8.966h-2.25M4.284 12h-2.25m15.364 6.364l-1.591-1.591M6.758 6.758L5.167 5.167m12.728 0l-1.591 1.591M6.758 17.242l-1.591 1.591M12 7.5a4.5 4.5 0 100 9 4.5 4.5 0 000-9z"
          />
        </svg>
      )}
      {theme === "system" && (
        <svg
          className="h-3.5 w-3.5 text-ink-mute"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth="2"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"
          />
        </svg>
      )}
      <span className="font-mono text-[0.68rem] uppercase text-ink">
        {getLabel()}
      </span>
    </button>
  );
 }
@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  reactStrictMode: true,
  outputFileTracing: false,
  async redirects() {
    return [
      {
@@ -5,6 +5,7 @@
  "description": "Reference prototype landing page for 경북대학교 컴퓨터학부 AI 에이전트 네트워크 연구실 (ANL / AI Agent Networking Lab).",
  "scripts": {
    "dev": "next dev",
    "clean": "rm -rf .next tsconfig.tsbuildinfo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
@@ -0,0 +1,188 @@
 #!/usr/bin/env python3
 """
 E2E Test Suite Runner for ANL Homepage Development
 Verifies:
 0. Clean step (npm run clean -> removes .next and tsconfig.tsbuildinfo)
 1. ESLint (npm run lint)
 2. Next.js Static SSG Build (npm run build) with 0 dynamic routes
 3. TypeScript type check (npx tsc --noEmit)
 4. Existence and content of static SSG routes HTML/body files
 5. Data count losslessness & integrity gate (verify_counts.py)
 6. Light/Dark mode theme tokens and CSS attributes in source and build assets
 7. DOM & HTML Content Assertions (Unittest)
 """
 import os
 import sys
 import subprocess
 import re
 ROOT_DIR = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
 REFER_DIR = os.path.join(ROOT_DIR, "refer_landing_page")
 # Expected Static SSG Routes HTML/Body output paths relative to REFER_DIR
 EXPECTED_SSG_ROUTES = [
    os.path.join(".next", "server", "app", "index.html"),
    os.path.join(".next", "server", "app", "members.html"),
    os.path.join(".next", "server", "app", "publications.html"),
    os.path.join(".next", "server", "app", "publications", "intl-conf.html"),
    os.path.join(".next", "server", "app", "publications", "intl-journal-conf.html"),
    os.path.join(".next", "server", "app", "publications", "domestic-journal-conf.html"),
    os.path.join(".next", "server", "app", "publications", "patent.html"),
    os.path.join(".next", "server", "app", "lectures.html"),
    os.path.join(".next", "server", "app", "standardization.html"),
    os.path.join(".next", "server", "app", "_not-found.html"),
    os.path.join(".next", "server", "app", "robots.txt.body"),
    os.path.join(".next", "server", "app", "sitemap.xml.body"),
    os.path.join(".next", "server", "pages", "404.html"),
 ]
 def run_cmd(cmd, cwd=REFER_DIR):
    print(f"Running: {' '.join(cmd)} (cwd: {cwd})")
    res = subprocess.run(cmd, cwd=cwd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True)
    return res
 def test_clean():
    print("\n--- Gate 0: Clean Step (workspace build cache purge) ---")
    res = run_cmd(["bash", "-c", "npm run clean"])
    if res.returncode != 0:
        print(f"❌ Clean step failed:\n{res.stdout}\n{res.stderr}")
        return False
    print("✅ Gate 0 PASSED: Cleaned .next and tsconfig.tsbuildinfo")
    return True
 def test_lint():
    print("\n--- Gate 1: ESLint Quality Gate ---")
    res = run_cmd(["npm", "run", "lint"])
    if res.returncode != 0:
        print(f"❌ Lint failed:\n{res.stdout}\n{res.stderr}")
        return False
    print("✅ Gate 1 PASSED: ESLint clean (0 errors, 0 warnings)")
    return True
 def test_build():
    print("\n--- Gate 2: Next.js Static SSG Build Gate ---")
    res = run_cmd(["npm", "run", "build"])
    if res.returncode != 0:
        print(f"❌ SSG Build failed:\n{res.stdout}\n{res.stderr}")
        return False
    # Check stdout/stderr for dynamic routes (f Dynamic)
    if "ƒ" in res.stdout or "Dynamic" in res.stdout:
        # Search specifically for dynamic routes output line
        lines = res.stdout.splitlines()
        dynamic_lines = [l for l in lines if "ƒ" in l or "Dynamic" in l]
        if dynamic_lines:
            print(f"❌ Found dynamic route(s) in build report: {dynamic_lines}")
            return False
    print("✅ Gate 2 PASSED: Static SSG Build successful (0 dynamic routes)")
    return True
 def test_tsc():
    print("\n--- Gate 3: TypeScript Type Safety Gate ---")
    res = run_cmd(["npx", "tsc", "--noEmit"])
    if res.returncode != 0:
        print(f"❌ Type check failed:\n{res.stdout}\n{res.stderr}")
        return False
    print("✅ Gate 3 PASSED: TypeScript type check clean (exit code 0)")
    return True
 def test_ssg_routes():
    print("\n--- Gate 4: Static SSG HTML Route Verification ---")
    missing = []
    for rel_path in EXPECTED_SSG_ROUTES:
        full_path = os.path.join(REFER_DIR, rel_path)
        if not os.path.exists(full_path):
            missing.append(rel_path)
        else:
            size = os.path.getsize(full_path)
            print(f"  [OK] {rel_path} ({size} bytes)")
    if missing:
        print(f"❌ Missing {len(missing)} SSG routes:")
        for m in missing:
            print(f"  - {m}")
        return False
    print(f"✅ Gate 4 PASSED: All {len(EXPECTED_SSG_ROUTES)} static SSG routes exist and are non-empty")
    return True
 def test_data_counts():
    print("\n--- Gate 5: Data Losslessness Integrity Gate ---")
    script_path = os.path.join(REFER_DIR, "scripts", "extract", "verify_counts.py")
    res = run_cmd([sys.executable, script_path], cwd=ROOT_DIR)
    if res.returncode != 0:
        print(f"❌ Data count verification failed:\n{res.stdout}\n{res.stderr}")
        return False
    print(res.stdout.strip())
    print("✅ Gate 5 PASSED: Data count integrity & volume losslessness verified")
    return True
 def test_theme_tokens():
    print("\n--- Gate 6: CSS & Theme Token Verification ---")
    globals_css = os.path.join(REFER_DIR, "app", "globals.css")
    tailwind_config = os.path.join(REFER_DIR, "tailwind.config.ts")
    if not os.path.exists(globals_css):
        print(f"❌ Missing {globals_css}")
        return False
    with open(globals_css, "r", encoding="utf-8") as f:
        css_text = f.read()
    tokens = ["--ink", "--ivory", "--paper", "--line", "--vermillion", "--cobalt"]
    missing_tokens = [t for t in tokens if t not in css_text]
    if missing_tokens:
        print(f"❌ Missing CSS theme tokens in globals.css: {missing_tokens}")
        return False
    with open(tailwind_config, "r", encoding="utf-8") as f:
        tw_text = f.read()
    tw_tokens = ["vermillion", "cobalt", "dark"]
    missing_tw = [t for t in tw_tokens if t not in tw_text]
    if missing_tw:
        print(f"❌ Missing Tailwind theme tokens in tailwind.config.ts: {missing_tw}")
        return False
    print("✅ Gate 6 PASSED: Light/Dark theme CSS variables and Tailwind tokens present")
    return True
 def test_unittest_suite():
    print("\n--- Gate 7: DOM & HTML Content Assertions (Unittest) ---")
    test_path = os.path.join(REFER_DIR, "tests", "e2e_test_suite.py")
    res = run_cmd([sys.executable, "-m", "unittest", test_path], cwd=ROOT_DIR)
    if res.returncode != 0:
        print(f"❌ Unittest suite failed:\n{res.stdout}\n{res.stderr}")
        return False
    print("✅ Gate 7 PASSED: All 6 DOM & static HTML content assertion tests passed")
    return True
 def main():
    print("=" * 70)
    print(" ANL HOMEPAGE E2E TEST SUITE RUNNER — TIERS 1-4")
    print("=" * 70)
    success = True
    success &= test_clean()
    success &= test_lint()
    success &= test_build()
    success &= test_tsc()
    success &= test_ssg_routes()
    success &= test_data_counts()
    success &= test_theme_tokens()
    success &= test_unittest_suite()
    print("\n" + "-" * 70)
    if success:
        print("ALL E2E TEST SUITES PASSED CLEAN (Exit Code 0).")
        print("=" * 70)
        sys.exit(0)
    else:
        print("❌ ONE OR MORE E2E GATES FAILED.")
        print("=" * 70)
        sys.exit(1)
 if __name__ == "__main__":
    main()
@@ -21,6 +21,7 @@ import type { Config } from "tailwindcss";
 * Font CSS variables are injected by next/font in app/layout.tsx.
 */
 const config: Config = {
  darkMode: ["class", '[data-theme="dark"]'],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
@@ -29,45 +30,54 @@ const config: Config = {
    extend: {
      colors: {
        ink: {
-          DEFAULT: "#0A0A0A",
+          DEFAULT: "rgb(var(--ink-rgb) / <alpha-value>)",
-          soft: "#262420",
+          soft: "rgb(var(--ink-soft-rgb) / <alpha-value>)",
-          mute: "#6B655B",
+          mute: "rgb(var(--ink-mute-rgb) / <alpha-value>)",
        },
-        ivory: "#F5F1E8",
+        ivory: "rgb(var(--ivory-rgb) / <alpha-value>)",
-        paper: "#ECE6D6",
+        paper: "rgb(var(--paper-rgb) / <alpha-value>)",
-        line: "#D8D1C0",
+        line: "rgb(var(--line-rgb) / <alpha-value>)",
        vermillion: {
-          DEFAULT: "#D9342B",
+          DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
-          dark: "#A8231C",
+          dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
        },
        cobalt: {
-          DEFAULT: "#1B3A8A",
+          DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)",
-          dark: "#122863",
+          dark: "rgb(var(--cobalt-dark-rgb) / <alpha-value>)",
        },
        // Back-compat aliases so any stray legacy class still resolves.
        brand: {
-          DEFAULT: "#D9342B",
+          DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
-          dark: "#A8231C",
+          dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
-          light: "#1B3A8A",
+          light: "rgb(var(--cobalt-rgb) / <alpha-value>)",
        },
-        accent: { DEFAULT: "#1B3A8A" },
+        accent: { DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)" },
      },
      fontFamily: {
        // English display serif — magazine cover scale.
        display: ["var(--font-display)", "Fraunces", "Georgia", "serif"],
        // Korean serif headlines.
        "serif-ko": ["var(--font-serif-ko)", "Noto Serif KR", "serif"],
-        // Clean sans body. Pretendard preferred, Inter as web fallback.
+        // Clean sans body. Geist preferred, Pretendard & Inter as web fallbacks.
        sans: [
-          "Pretendard",
+          "Geist",
          "var(--font-sans)",
          "Pretendard",
          "Inter",
          "ui-sans-serif",
          "system-ui",
          "Apple SD Gothic Neo",
          "Malgun Gothic",
          "sans-serif",
        ],
        mono: [
          "Geist Mono",
          "var(--font-mono)",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "Monaco",
          "Consolas",
          "monospace",
        ],
      },
      fontSize: {
        // Magazine-cover display scale. Capped at 7rem (was 9rem) so the
@@ -0,0 +1,98 @@
 #!/usr/bin/env python3
 """
 Python Unittest Suite for ANL Homepage E2E Verification
 Parses prerendered SSG HTML files to assert DOM structure, text content, and theme attributes.
 """
 import unittest
 import os
 import re
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 SERVER_APP_DIR = os.path.join(BASE_DIR, ".next", "server", "app")
 if not os.path.exists(SERVER_APP_DIR):
    for candidate in [
        os.path.join(os.getcwd(), "refer_landing_page", ".next", "server", "app"),
        os.path.join(os.getcwd(), "website", ".next", "server", "app"),
        os.path.join(os.getcwd(), ".next", "server", "app"),
    ]:
        if os.path.exists(candidate):
            SERVER_APP_DIR = candidate
            break
 class TestANLHomepageE2E(unittest.TestCase):
    def read_html(self, relative_path):
        full_path = os.path.join(SERVER_APP_DIR, relative_path)
        self.assertTrue(os.path.exists(full_path), f"File {relative_path} does not exist")
        with open(full_path, "r", encoding="utf-8") as f:
            return f.read()
    def test_01_home_page_structure(self):
        """TC-T1-F3: Verify Home page SSG HTML content and semantic structures."""
        html = self.read_html("index.html")
        # 1. Brand & Header titles
        self.assertIn("AI 에이전트 네트워크 연구실", html)
        self.assertIn("AI Agent Networking Lab (ANL)", html)
        # 2. Core Pillars keywords
        self.assertIn("MCP", html)
        self.assertIn("Multi-Agent Systems", html)
        self.assertIn("Interoperability Standards", html)
        self.assertIn("High-Performance Backbone", html)
        # 3. Location / Address section
        self.assertIn("address", html.lower())
        self.assertIn("경북대학교 IT대학 5호관", html)
        self.assertIn("sjkoh@knu.ac.kr", html)
    def test_02_members_page_content(self):
        """TC-T1-F4: Verify Members page active members & alumni records."""
        html = self.read_html("members.html")
        # Professor profile
        self.assertIn("고석주", html)
        self.assertIn("Seok-Joo Koh", html)
        self.assertIn("sjkoh@knu.ac.kr", html)
        # Members content sanity checks
        self.assertIn("Members", html)
    def test_03_publications_category_routes(self):
        """TC-T1-F5: Verify Publications categories SSG static pages."""
        cats = [
            ("intl-conf.html", "International Conference"),
            ("intl-journal-conf.html", "International Journal"),
            ("domestic-journal-conf.html", "Domestic Journal"),
            ("patent.html", "Patent"),
        ]
        for path_suffix, expected_text in cats:
            rel_path = os.path.join("publications", path_suffix)
            html = self.read_html(rel_path)
            self.assertIn(expected_text, html, f"Category route {path_suffix} missing '{expected_text}'")
    def test_04_lectures_page_content(self):
        """TC-T1-F6: Verify Lectures page HTML structure."""
        html = self.read_html("lectures.html")
        self.assertIn("Lectures", html)
    def test_05_standardization_page_content(self):
        """TC-T1-F6: Verify Standardization page standards bodies."""
        html = self.read_html("standardization.html")
        self.assertIn("Standardization", html)
        self.assertIn("IEC TC100", html)
    def test_06_theme_css_variables(self):
        """TC-T1-F2: Verify globals.css and built assets contain theme tokens."""
        globals_path = os.path.join(BASE_DIR, "app", "globals.css")
        if not os.path.exists(globals_path):
            globals_path = os.path.join(os.getcwd(), "refer_landing_page", "app", "globals.css")
        with open(globals_path, "r", encoding="utf-8") as f:
            css = f.read()
        for token in ["--ink", "--ivory", "--paper", "--line", "--vermillion", "--cobalt"]:
            self.assertIn(token, css, f"Missing CSS variable {token} in globals.css")
 if __name__ == "__main__":
    unittest.main()
@@ -0,0 +1 @@
 refer_landing_page