diff --git a/refer_landing_page/components/Header.tsx b/refer_landing_page/components/Header.tsx
index ac708b8..57a2191 100644
--- a/refer_landing_page/components/Header.tsx
+++ b/refer_landing_page/components/Header.tsx
@@ -64,20 +64,28 @@ export default function Header() {
                   key={item.href}
                   href={item.href}
                   aria-current={active ? "page" : undefined}
+                  style={
+                    active
+                      ? { backgroundColor: "var(--vermillion)", color: "#ffffff" }
+                      : undefined
+                  }
                   className={`group relative flex items-baseline gap-1.5 text-[0.78rem] font-bold uppercase tracking-[0.18em] transition-all px-3.5 py-1.5 rounded-md ${
                     active
-                      ? "bg-vermillion text-white shadow-sm"
+                      ? "shadow-sm font-bold"
                       : "text-ink hover:text-vermillion hover:bg-paper/60"
                   }`}
                 >
                   <span
+                    style={active ? { color: "#ffffff" } : undefined}
                     className={`font-display text-[0.62rem] ${
-                      active ? "text-white/90" : "text-ink-mute"
+                      active ? "opacity-90 font-bold" : "text-ink-mute"
                     }`}
                   >
                     {item.no}
                   </span>
-                  <span className={active ? "text-white" : ""}>{item.en}</span>
+                  <span style={active ? { color: "#ffffff" } : undefined}>
+                    {item.en}
+                  </span>
                 </Link>
               );
             })}
@@ -124,27 +132,37 @@ export default function Header() {
                     href={item.href}
                     onClick={() => setOpen(false)}
                     aria-current={active ? "page" : undefined}
+                    style={
+                      active
+                        ? { backgroundColor: "var(--vermillion)", color: "#ffffff" }
+                        : 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 shadow-sm"
+                        ? "font-bold shadow-sm"
                         : "text-ink hover:bg-paper/60"
                     }`}
                   >
                     <span className="flex items-baseline gap-3">
                       <span
+                        style={active ? { color: "#ffffff" } : undefined}
                         className={`font-display text-xs ${
-                          active ? "text-white/90" : "text-ink-mute"
+                          active ? "opacity-90 font-bold" : "text-ink-mute"
                         }`}
                       >
                         {item.no}
                       </span>
-                      <span className={`headline-ko text-lg ${active ? "text-white" : ""}`}>
+                      <span
+                        style={active ? { color: "#ffffff" } : undefined}
+                        className="headline-ko text-lg font-bold"
+                      >
                         {item.ko}
                       </span>
                     </span>
                     <span
+                      style={active ? { color: "#ffffff" } : undefined}
                       className={`text-[0.7rem] font-semibold uppercase tracking-[0.18em] ${
-                        active ? "text-white/90" : "text-ink-mute"
+                        active ? "opacity-90 font-bold" : "text-ink-mute"
                       }`}
                     >
                       {item.en}
diff --git a/refer_landing_page/tailwind.config.ts b/refer_landing_page/tailwind.config.ts
index 8ba53c7..97fbbfe 100644
--- a/refer_landing_page/tailwind.config.ts
+++ b/refer_landing_page/tailwind.config.ts
@@ -33,28 +33,28 @@ const config: Config = {
       },
       colors: {
         ink: {
-          DEFAULT: "rgb(var(--ink-rgb) / <alpha-value>)",
-          soft: "rgb(var(--ink-soft-rgb) / <alpha-value>)",
-          mute: "rgb(var(--ink-mute-rgb) / <alpha-value>)",
+          DEFAULT: "var(--ink)",
+          soft: "var(--ink-soft)",
+          mute: "var(--ink-mute)",
         },
-        ivory: "rgb(var(--ivory-rgb) / <alpha-value>)",
-        paper: "rgb(var(--paper-rgb) / <alpha-value>)",
-        line: "rgb(var(--line-rgb) / <alpha-value>)",
+        ivory: "var(--ivory)",
+        paper: "var(--paper)",
+        line: "var(--line)",
         vermillion: {
-          DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
-          dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
+          DEFAULT: "var(--vermillion)",
+          dark: "var(--vermillion-dark)",
         },
         cobalt: {
-          DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)",
-          dark: "rgb(var(--cobalt-dark-rgb) / <alpha-value>)",
+          DEFAULT: "var(--cobalt)",
+          dark: "var(--cobalt-dark)",
         },
         // Back-compat aliases so any stray legacy class still resolves.
         brand: {
-          DEFAULT: "rgb(var(--vermillion-rgb) / <alpha-value>)",
-          dark: "rgb(var(--vermillion-dark-rgb) / <alpha-value>)",
-          light: "rgb(var(--cobalt-rgb) / <alpha-value>)",
+          DEFAULT: "var(--vermillion)",
+          dark: "var(--vermillion-dark)",
+          light: "var(--cobalt)",
         },
-        accent: { DEFAULT: "rgb(var(--cobalt-rgb) / <alpha-value>)" },
+        accent: { DEFAULT: "var(--cobalt)" },
       },
       fontFamily: {
         // English display serif — magazine cover scale.