feat(blog): 디자인 토큰 + 브랜드 액센트(인디고) 도입 (#94)

apps/blog/src/app/(main)/main-client-layout.tsx

@@ -52,7 +52,7 @@ export default function MainClientLayout({
               평소엔 sr-only로 숨기고 포커스되면 좌상단에 노출한다. */}
           <a
             href={`#${Constants.a11y.mainContentId}`}
-            className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded focus:bg-black focus:px-4 focus:py-2 focus:text-white"
+            className="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-[100] focus:rounded focus:bg-[var(--color-ink)] focus:px-4 focus:py-2 focus:text-white"
           >
             본문으로 건너뛰기
           </a>

apps/blog/src/app/global.css

@@ -1,5 +1,16 @@
 @import 'tailwindcss';
 
+/* === 디자인 토큰 (#94) ===
+   의미 기반 색 토큰의 단일 출처. 컴포넌트는 bg-[var(--color-brand)] 형태의
+   arbitrary 유틸리티로 참조한다(이 프로젝트의 Turbopack+v4 빌드에서 @theme는
+   유틸리티를 생성하지 않아, 코드베이스가 이미 쓰는 arbitrary value 방식으로 통일). */
+:root {
+  /* 브랜드 액센트(인디고). 활성 칩·현재 시리즈·포커스 링 등에 절제 있게 적용한다. */
+  --color-brand: #6366f1;
+  /* 다크 서피스 단일 토큰. 헤더·드롭다운·사이드바·뱃지의 검정 계열(black/gray-900/950)을 통일한다. */
+  --color-ink: #0a0a0a;
+}
+
 html,
 body {
   height: 100%;

apps/blog/src/components/badge.tsx

@@ -28,7 +28,7 @@ export function Badge({ href, children, onClick, color = 'secondary', active }:
         'px-[8px] py-[8px]',
         'md:px-[12px] md:py-[6px]',
         'whitespace-nowrap',
-        color === 'primary' ? 'bg-gray-700 text-white' : 'bg-gray-100 text-gray-700',
+        color === 'primary' ? 'bg-[var(--color-brand)] text-white' : 'bg-gray-100 text-gray-700',
         'hover:brightness-95 active:brightness-90',
       )}
     >

apps/blog/src/components/dropdown-menu.tsx

@@ -151,7 +151,7 @@ export function DropdownMenu({ title, items, leftOffset = 0, ...option }: Dropdo
         id={listId}
         ref={dropdownBodyRef}
         className={classNames(
-          'absolute top-6 bg-gray-950 z-50 px-2 py-4 flex-col transition-all duration-300',
+          'absolute top-6 bg-[var(--color-ink)] z-50 px-2 py-4 flex-col transition-all duration-300',
           'rounded-b-lg drop-shadow-2xl',
           visible ? 'block' : 'hidden'
         )}

apps/blog/src/components/main-header.tsx

@@ -17,7 +17,7 @@ export function MainHeader({ seriesList, tags }: MainHeaderProps) {
       className={classNames(
         'blog-main-header',
         'relative z-50',
-        'bg-black text-white',
+        'bg-[var(--color-ink)] text-white',
         'h-[60px] md:h-[128px]',
       )}
     >

apps/blog/src/components/mobile-sidebar.tsx

@@ -130,7 +130,7 @@ export function MobileSidebar({ seriesList, tags }: MobileSidebarProps) {
         {/* ------------------------------------------------------ */}
         {/* SIDEBAR HEADER */}
         {/* ------------------------------------------------------ */}
-        <div className="flex items-center px-5 h-[60px] bg-black shrink-0">
+        <div className="flex items-center px-5 h-[60px] bg-[var(--color-ink)] shrink-0">
           <MainHeaderLogo />
           <span className="grow"></span>
 

apps/blog/src/components/post-detail/copy-button.tsx

@@ -50,7 +50,7 @@ export function CopyButton({ getContent }: CopyButtonProps) {
         // p-3로 키워 터치 타겟을 약 44px 확보(아이콘 20px + 패딩 24px).
         'absolute right-5 top-5 p-3 rounded-md opacity-80 hover:opacity-90 active:opacity-100',
         // 키보드 포커스 시 시각적 표시(focus-visible ring)로 접근성을 높인다.
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]',
         classes.copyBtn
       )}
       onClick={handleCopy}

apps/blog/src/components/post-detail/share-buttons.tsx

@@ -15,7 +15,7 @@ export interface ShareButtonsProps {
 const buttonClass = classNames(
   'flex items-center justify-center p-2.5 rounded-md text-gray-500',
   'hover:text-black hover:bg-gray-100 active:bg-gray-200',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-brand)]',
 );
 
 export function ShareButtons({ url, title }: ShareButtonsProps) {

apps/blog/src/components/search/search-modal.tsx

@@ -93,7 +93,7 @@ export function SearchModal() {
   return (
     // 배경 오버레이(클릭 시 닫힘)
     <div
-      className="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 px-4 pt-[12vh]"
+      className="fixed inset-0 z-[100] flex items-start justify-center bg-[var(--color-ink)]/50 px-4 pt-[12vh]"
       onClick={close}
     >
       {/* 모달 본체(내부 클릭은 닫힘 전파 차단) */}
@@ -171,7 +171,7 @@ export function SearchModal() {
                 >
                   <div className="flex items-center gap-2">
                     {doc.series && (
-                      <span className="shrink-0 rounded bg-black px-1.5 py-0.5 text-[11px] text-white">
+                      <span className="shrink-0 rounded bg-[var(--color-ink)] px-1.5 py-0.5 text-[11px] text-white">
                         {doc.series}
                       </span>
                     )}

apps/blog/src/components/series-detail/series-detail.tsx

@@ -52,8 +52,8 @@ export async function SeriesDetail({ series }: SeriesDetailProps) {
                   'px-3 py-1.5 text-xs md:text-sm',
                   'transition-all duration-200 ease-in-out',
                   active
-                    ? // 활성 시리즈: 진한 배경으로 강조한다.
-                      'bg-gray-900 text-white'
+                    ? // 활성 시리즈: 브랜드 액센트로 현재 위치를 강조한다.
+                      'bg-[var(--color-brand)] text-white'
                     : // 비활성 시리즈: 옅은 배경 + hover 강조로 클릭 가능함을 알린다.
                       'bg-gray-100 text-gray-700 hover:bg-gray-200',
                 )}