feat(period-tabs): rose accent + role=tab semantics for active period

The active period tab previously used `bg-zinc-700`, which blends with the
zinc-toned header buttons (비교 / 공유 / Star) right beside it — users had to
read the tab label to know which period was loaded.

Switch active style to rose-500 (한국 상승 컬러 톤 — same family as positive
returns and target lines elsewhere in the app), with bold weight and a soft
glow. Inactive tabs unchanged. Also adds tablist/tab/aria-selected semantics
so screen readers announce the active period.

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"
             }
           >