feat: implement layout 3-tier container architecture, desktop screen token, Gate 8 no-escape rule, and clean dead code

refer_landing_page/components/Header.tsx

@@ -28,7 +28,7 @@ export default function Header() {
   return (
     <header className="sticky top-0 z-50 border-b border-ink bg-ivory/85 backdrop-blur">
       {/* Journal issue strip — magazine masthead feel. */}
-      <div className="hidden border-b border-line lg:block">
+      <div className="hidden border-b border-line desktop:block">
         <div className="container-content flex items-center justify-between py-1.5">
           <span className="kicker">Issue 01 — 2026</span>
           {/* CUSTOMIZATION HOOK: masthead tagline */}
@@ -55,7 +55,7 @@ export default function Header() {
         </Link>
 
         {/* Desktop nav — small caps, wide tracking (visible at >= 1240px) */}
-        <div className="hidden items-center gap-7 min-[1240px]:flex">
+        <div className="hidden items-center gap-7 desktop:flex">
           <nav className="flex items-center gap-7" aria-label="주 메뉴">
             {navItems.map((item) => (
               <Link
@@ -85,7 +85,7 @@ export default function Header() {
         </div>
 
         {/* Mobile controls (visible under 1240px) */}
-        <div className="flex items-center gap-2 min-[1240px]:hidden">
+        <div className="flex items-center gap-2 desktop:hidden">
           <ThemeToggle />
           <button
             type="button"
@@ -110,7 +110,7 @@ export default function Header() {
       {open && (
         <nav
           id="mobile-menu"
-          className="border-t border-ink bg-ivory min-[1240px]:hidden"
+          className="border-t border-ink bg-ivory desktop:hidden"
           aria-label="모바일 메뉴"
         >
           <ul className="container-content flex flex-col divide-y divide-line py-2">

refer_landing_page/components/PageHeader.tsx

@@ -1,62 +0,0 @@
-import SectionLabel from "@/components/SectionLabel";
-import Reveal from "@/components/Reveal";
-
-/**
- * Editorial page masthead. Korean serif headline + huge English display
- * word, with magazine "NN / 05" spread numbering.
- *
- * CUSTOMIZATION HOOK — CONTENT: ko / en / display / description / index.
- */
-export default function PageHeader({
-  ko,
-  en,
-  display,
-  description,
-  index,
-}: {
-  ko: string;
-  en: string;
-  display?: string;
-  description?: string;
-  index: number;
-}) {
-  return (
-    <section className="relative overflow-hidden border-b border-ink bg-ivory">
-      <div className="container-content pb-12 pt-14 sm:pb-16 sm:pt-20">
-        <Reveal>
-          <SectionLabel index={index} label={en} />
-        </Reveal>
-
-        <div className="mt-8 grid items-end gap-6 lg:grid-cols-12">
-          <Reveal className="lg:col-span-8" delay={80}>
-            <h1 className="headline-ko break-keep text-balance text-3xl leading-[1.05] text-ink sm:text-4xl lg:text-5xl">
-              {ko}
-            </h1>
-            {/* When a custom `display` word is provided, render it at the full
-                magazine scale. Otherwise fall back to `en` at the smaller
-                `display-sm` scale so long words like "Standardization" never
-                overflow the col-span-8 column. See LAYOUT_AUDIT #6 + #10. */}
-            <p
-              className={
-                display
-                  ? "display mt-2 break-keep text-vermillion"
-                  : "display-sm mt-2 break-keep text-vermillion"
-              }
-              aria-hidden
-            >
-              {display ?? en}
-            </p>
-          </Reveal>
-
-          {description && (
-            <Reveal className="lg:col-span-4" variant="right" delay={160}>
-              <p className="border-l-2 border-ink pl-5 text-sm leading-relaxed text-ink-soft">
-                {description}
-              </p>
-            </Reveal>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}