diff --git a/web/components/PeriodTabs.tsx b/web/components/PeriodTabs.tsx
index 3cd5489..31d6d90 100644
--- a/web/components/PeriodTabs.tsx
+++ b/web/components/PeriodTabs.tsx
@@ -38,17 +38,30 @@ type Props = {
 };
 
 export function PeriodTabs({ value, onChange }: Props) {
+  // 활성 탭 스타일:
+  //   이전엔 `bg-zinc-700` 만 사용해 헤더의 다른 zinc-톤 버튼(비교/공유/Star) 과 색이 거의 동일,
+  //   페이지에서 "지금 어느 기간이 선택돼 있는지" 한눈에 안 들어왔음.
+  //   한국 컬러 상승 톤(rose-500) 으로 칠해서 zinc 버튼군 사이에서 즉시 식별. 다른 모듈의 활성/positive
+  //   상태(목표가 라인, 등락 양수 등) 도 같은 rose 계열이라 톤 일관성 유지.
+  // aria-pressed: 토글 그룹 의미 명시 — 스크린리더가 선택 상태 읽어줌.
   return (
-    <div className="inline-flex rounded-full border border-zinc-800 bg-zinc-900 p-1 text-xs">
+    <div
+      role="tablist"
+      aria-label="기간 선택"
+      className="inline-flex rounded-full border border-zinc-800 bg-zinc-900 p-1 text-xs"
+    >
       {PERIODS.map((p) => {
         const active = value === p.id;
         return (
           <button
             key={p.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
             onClick={() => onChange(p.id, p.interval, p.days)}
             className={
               active
-                ? "rounded-full bg-zinc-700 px-3 py-1 font-medium text-zinc-50"
+                ? "rounded-full bg-rose-500 px-3 py-1 font-semibold text-white shadow-sm shadow-rose-500/40"
                 : "rounded-full px-3 py-1 text-zinc-400 hover:text-zinc-100"
             }
           >