diff --git a/web/app/[code]/page.tsx b/web/app/[code]/page.tsx
index 4ce88e0..beedecb 100644
--- a/web/app/[code]/page.tsx
+++ b/web/app/[code]/page.tsx
@@ -182,7 +182,14 @@ export default function CodePage({ params }: { params: { code: string } }) {
 
   return (
     <main className="mx-auto max-w-5xl px-6 py-8">
-      <div className="mb-4 flex items-center justify-between gap-3">
+      {/*
+        헤더 액션 바 — 2 행 구조:
+          1행) 좌: 페이지 nav 링크 (← 검색 / 관심종목), 우: 종목 액션 (비교/공유/Star)
+          2행) PeriodTabs (7 탭) 단독 — 항상 우측 정렬
+        한 줄에 nav+액션+7탭 을 모두 넣으면 모바일에서 wrap 되며 PeriodTabs 가 줄 중간에
+        끼어 어색해짐. 2행 분리 + flex-wrap + overflow-x-auto 로 모든 폭에서 일관.
+      */}
+      <div className="mb-2 flex flex-wrap items-center justify-between gap-3">
         <div className="flex items-center gap-3">
           <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
             ← 검색
@@ -194,7 +201,7 @@ export default function CodePage({ params }: { params: { code: string } }) {
             관심종목
           </Link>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center justify-end gap-3">
           <Link
             href={`/compare?codes=${code}`}
             className="rounded-md border border-zinc-700 px-2 py-0.5 text-[11px] text-zinc-400 hover:border-zinc-500 hover:text-zinc-200"
@@ -204,9 +211,11 @@ export default function CodePage({ params }: { params: { code: string } }) {
           </Link>
           <ShareButton code={code} name={chart?.name} />
           <StarButton code={code} name={chart?.name} />
-          <PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
         </div>
       </div>
+      <div className="mb-4 flex justify-end overflow-x-auto">
+        <PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
+      </div>
 
       {err && <div className="mb-4 text-sm text-red-400">차트 로딩 실패: {err}</div>}