diff --git a/AGENTS.md b/AGENTS.md
index eae6c34..3461705 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -178,7 +178,9 @@ pnpm test:loading # 빌드 후 로딩 분리, 재시도, SSG 회귀 검사
 
 ### Reader and browser regression checks
 - `scripts/image-assets.ts`에서 본문 이미지의 WebP와 크기 메타데이터를 생성합니다. 원본 파일은 유지합니다.
-- 글 본문은 최대 800px, 1280px 이상에서 옆 목차, 작은 화면에서 접는 목차를 사용합니다.
+- 글 본문과 목차 전체는 최대 1152px로 중앙 정렬합니다. 1280px 이상에서 본문 최대 912px + 간격 32px + 목차 208px로 배치하고, 작은 화면에서는 접는 목차를 사용합니다.
+- SSR 본문에 목차 대상 제목이 있으면 접힌 목차의 48px 높이를 hydration 전부터 확보합니다.
+- 태그·시리즈·소개·분석의 열 전환은 페이지나 목록의 실제 가용폭을 기준으로 합니다.
 - `useHydratedSearchParams`로 첫 렌더를 SSG와 맞춘 후 필터를 적용합니다. 404 프리렌더 표시가 있으면 클라이언트도 404 라우트로 시작합니다.
 - `pnpm preview`는 GitHub Pages의 실제 404 응답을 재현합니다.
 - 이동·hydration·접근성 변경 후 `pnpm build`, `pnpm test:browser`를 실행합니다.
diff --git a/src/components/PostImage.tsx b/src/components/PostImage.tsx
index 41c6b9b..7f00479 100644
--- a/src/components/PostImage.tsx
+++ b/src/components/PostImage.tsx
@@ -5,6 +5,6 @@ export function PostImage({ src, alt = "", ...props }: ComponentPropsWithoutRef<
   const asset = src ? images[src] : undefined
   return <img {...props} alt={alt} src={asset?.src ?? src} srcSet={asset?.srcSet ?? props.srcSet}
     width={asset?.width ?? props.width} height={asset?.height ?? props.height}
-    sizes={asset ? "(max-width: 767px) calc(100vw - 2rem), 800px" : props.sizes}
+    sizes={asset ? "(max-width: 767px) calc(100vw - 2rem), 912px" : props.sizes}
     loading={props.loading ?? "lazy"} decoding="async" />
 }
diff --git a/src/index.css b/src/index.css
index da85374..f3da51c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -386,7 +386,7 @@ html.theme-transition *::after {
 }
 
 .page-container-article {
-  --page-container-max-width: 72rem;
+  --page-container-max-width: 57rem;
 }
 
 .page-container-wide {
@@ -394,9 +394,10 @@ html.theme-transition *::after {
 }
 
 /* 글 본문과 목차를 화면 크기에 맞춰 배치한다. */
-.post-page-layout { display: flex; flex-direction: column; gap: 1.5rem; }
-.page-container-article { --page-container-max-width: 50rem; }
+.post-page-layout { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; max-width: 72rem; margin-inline: auto; }
 .post-toc-layer { order: -1; position: sticky; top: 3rem; z-index: 30; }
+/* SSR 본문에 목차 대상이 있으면 hydration 전부터 접힌 목차 높이를 확보한다. */
+.post-page-layout:has(.prose h2[id], .prose h3[id]) .post-toc-layer { min-height: 3rem; }
 .post-toc-panel { padding: .5rem .75rem; background: var(--background); }
 .post-toc-desktop-title { display: none; }
 .post-toc-list { display: none; margin-top: .75rem; max-height: 50vh; overflow-y: auto; }
@@ -408,7 +409,7 @@ html.theme-transition *::after {
   .prose h2, .prose h3 { scroll-margin-top: 5rem; }
 }
 @media (min-width: 1280px) {
-  .post-page-layout { display: grid; grid-template-columns: minmax(0, 50rem) 13rem; gap: 2rem; max-width: 65rem; margin-inline: auto; align-items: start; }
+  .post-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2rem; align-items: start; }
   .post-article-centered { grid-column: 1; grid-row: 1; }
   .post-toc-layer { grid-column: 2; grid-row: 1; top: 2rem; }
   .post-toc-panel { padding: .75rem; }
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
index ed029a9..5cb0294 100644
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -61,7 +61,7 @@ function CompanySection({
   const t = useT()
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-[160px_1fr] gap-4 md:gap-8">
+    <div className="grid grid-cols-1 gap-4 @min-[48rem]/about:grid-cols-[160px_minmax(0,1fr)] @min-[48rem]/about:gap-8">
       {/* Left: Company Info */}
       <div>
         <h3 className="font-bold">{company.name}</h3>
@@ -70,7 +70,7 @@ function CompanySection({
       </div>
 
       {/* Right: Projects */}
-      <div className="space-y-3">
+      <div className="min-w-0 space-y-3">
         {company.projects.map((ps, index) => {
           const project = projects.find((p) => p.slug === ps.slug)
           if (!project) return null
@@ -214,17 +214,17 @@ export function AboutPage() {
   }
 
   return (
-    <PageContainer variant="wide" className="space-y-10">
+    <PageContainer variant="wide" className="@container/about space-y-10">
       {/* Profile Header */}
-      <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
-        <Avatar className="h-24 w-24">
+      <div className="flex flex-col items-center gap-6 @min-[30rem]/about:flex-row @min-[30rem]/about:items-start">
+        <Avatar className="h-24 w-24 shrink-0">
           <AvatarImage src="https://github.com/devy1540.png" alt={resume.profile.name} />
           <AvatarFallback className="text-2xl">HJ</AvatarFallback>
         </Avatar>
-        <div className="text-center sm:text-left space-y-2">
+        <div className="min-w-0 w-full space-y-2 text-center @min-[30rem]/about:flex-1 @min-[30rem]/about:text-left">
           <h1 className="text-3xl font-bold tracking-tight">{resume.profile.name}</h1>
           <p className="text-lg text-muted-foreground">{t.about.description}</p>
-          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground justify-center sm:justify-start">
+          <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-sm text-muted-foreground @min-[30rem]/about:justify-start">
             <a href={`mailto:${resume.profile.email}`} className="inline-flex items-center gap-1.5 hover:text-foreground transition-colors">
               <Mail className="h-3.5 w-3.5" />
               {resume.profile.email}
@@ -234,7 +234,7 @@ export function AboutPage() {
               {displayPhone}
             </a>
           </div>
-          <div className="flex gap-2 justify-center sm:justify-start">
+          <div className="flex flex-wrap justify-center gap-2 @min-[30rem]/about:justify-start">
             <Button asChild variant="outline" size="sm">
               <a href={resume.profile.github} target="_blank" rel="noopener noreferrer">
                 <Github className="mr-2 h-4 w-4" />
@@ -279,7 +279,7 @@ export function AboutPage() {
       {/* Development approach */}
       <section>
         <h2 className="text-2xl font-semibold mb-4">{t.about.aiNativeDevelopment}</h2>
-        <div className="grid gap-3 md:grid-cols-3">
+        <div className="grid gap-3 @min-[48rem]/about:grid-cols-3">
           {resume.aiNativeWorkflow.map((item) => (
             <div key={item.title} className="rounded-lg border bg-card p-4">
               <h3 className="font-semibold">{item.title}</h3>
diff --git a/src/pages/AnalyticsPage.tsx b/src/pages/AnalyticsPage.tsx
index 497ebc1..b8e0cfb 100644
--- a/src/pages/AnalyticsPage.tsx
+++ b/src/pages/AnalyticsPage.tsx
@@ -219,11 +219,11 @@ export function AnalyticsPage() {
   ]
 
   return (
-    <PageContainer>
+    <PageContainer className="@container/analytics">
       <section className="mb-8">
         <h1 className="text-4xl font-bold tracking-tight mb-2">{t.common.analytics}</h1>
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-          <p className="text-muted-foreground flex-1">{t.analytics.description}</p>
+        <div className="flex flex-col gap-3 @min-[40rem]/analytics:flex-row @min-[40rem]/analytics:items-center">
+          <p className="min-w-0 text-muted-foreground flex-1">{t.analytics.description}</p>
           <div className="flex flex-wrap items-center gap-2">
             <ToggleGroup
               type="single"
@@ -260,14 +260,14 @@ export function AnalyticsPage() {
       </section>
 
       {/* Summary Cards */}
-      <section className="grid grid-cols-2 gap-3 mb-8 md:grid-cols-4">
+      <section className="grid grid-cols-1 gap-3 mb-8 @min-[22rem]/analytics:grid-cols-2 @min-[48rem]/analytics:grid-cols-4">
         {summaryCards.map((card) => (
-          <Card key={card.label} className="py-4">
+          <Card key={card.label} className="min-w-0 py-4">
             <CardContent className="flex items-center gap-3 px-4">
               <card.icon className="size-5 text-muted-foreground shrink-0" />
-              <div>
-                <p className="text-xs text-muted-foreground">{card.label}</p>
-                <p className="text-2xl font-bold tabular-nums">{card.value}</p>
+              <div className="min-w-0">
+                <p className="text-xs text-muted-foreground wrap-anywhere">{card.label}</p>
+                <p className="text-2xl font-bold tabular-nums break-all">{card.value}</p>
               </div>
             </CardContent>
           </Card>
@@ -285,21 +285,21 @@ export function AnalyticsPage() {
 
       {/* Traffic Momentum */}
       <section className="mb-8">
-        <div className="mb-4 flex items-center justify-between gap-3">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
           <h2 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
             {t.analytics.trafficMomentum}
           </h2>
           <Badge variant="outline">{rangeDays === 7 ? t.analytics.range7d : rangeDays === 14 ? t.analytics.range14d : t.analytics.range30d}</Badge>
         </div>
-        <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
+        <div className="grid grid-cols-1 gap-3 @min-[22rem]/analytics:grid-cols-2 @min-[48rem]/analytics:grid-cols-4">
           {momentumCards.map((card) => (
-            <Card key={card.label} className="py-4">
+            <Card key={card.label} className="min-w-0 py-4">
               <CardContent className="px-4">
                 <div className="mb-3 flex items-center justify-between gap-2">
-                  <p className="text-xs text-muted-foreground">{card.label}</p>
+                  <p className="min-w-0 text-xs text-muted-foreground wrap-anywhere">{card.label}</p>
                   <card.icon className="size-4 text-muted-foreground shrink-0" />
                 </div>
-                <p className="text-2xl font-bold tabular-nums">{card.value}</p>
+                <p className="text-2xl font-bold tabular-nums break-all">{card.value}</p>
                 <p className="mt-1 text-xs text-muted-foreground truncate">{card.detail}</p>
               </CardContent>
             </Card>
@@ -309,14 +309,14 @@ export function AnalyticsPage() {
 
       {/* Content Insights */}
       <section className="mb-8">
-        <div className="mb-4 flex items-center justify-between gap-3">
+        <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
           <h2 className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
             {t.analytics.contentInsights}
           </h2>
           <Badge variant="secondary">{t.analytics.allTimeBasis}</Badge>
         </div>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <Card>
+        <div className="grid gap-4 @min-[48rem]/analytics:grid-cols-2">
+          <Card className="min-w-0">
             <CardHeader>
               <CardTitle className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
                 {t.analytics.fastestPosts}
@@ -353,7 +353,7 @@ export function AnalyticsPage() {
             </CardContent>
           </Card>
 
-          <Card>
+          <Card className="min-w-0">
             <CardHeader>
               <CardTitle className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
                 {t.analytics.tagPerformance}
@@ -366,9 +366,9 @@ export function AnalyticsPage() {
                 <div className="space-y-3">
                   {tagPerformance.map((item) => (
                     <div key={item.tag}>
-                      <div className="mb-1 flex items-center gap-2">
-                        <span className="text-sm font-medium truncate">{item.tag}</span>
-                        <span className="ml-auto text-xs text-muted-foreground tabular-nums">
+                      <div className="mb-1 flex flex-wrap items-center gap-x-2 gap-y-1">
+                        <span className="min-w-0 text-sm font-medium truncate">{item.tag}</span>
+                        <span className="ml-auto text-xs text-muted-foreground tabular-nums wrap-anywhere">
                           {formatMetric(item.views)} · {formatMetric(item.averageViews, 1)} {t.analytics.averageViews}
                         </span>
                       </div>
@@ -385,7 +385,7 @@ export function AnalyticsPage() {
             </CardContent>
           </Card>
 
-          <Card className="lg:col-span-2">
+          <Card className="min-w-0 @min-[48rem]/analytics:col-span-2">
             <CardHeader>
               <CardTitle className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
                 {t.analytics.seriesPerformance}
@@ -395,12 +395,12 @@ export function AnalyticsPage() {
               {seriesPerformance.length === 0 ? (
                 <p className="text-sm text-muted-foreground">{t.analytics.noSeriesData}</p>
               ) : (
-                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+                <div className="grid gap-3 @min-[32rem]/analytics:grid-cols-2 @min-[64rem]/analytics:grid-cols-5">
                   {seriesPerformance.map((item) => (
-                    <div key={item.series} className="rounded-md border p-3">
+                    <div key={item.series} className="min-w-0 rounded-md border p-3">
                       <p className="mb-2 line-clamp-2 min-h-10 text-sm font-medium">{item.series}</p>
-                      <p className="text-xl font-bold tabular-nums">{formatMetric(item.views)}</p>
-                      <p className="text-xs text-muted-foreground">
+                      <p className="text-xl font-bold tabular-nums break-all">{formatMetric(item.views)}</p>
+                      <p className="text-xs text-muted-foreground wrap-anywhere">
                         {item.count} {t.analytics.postsCount} · {formatMetric(item.averageViews, 1)} {t.analytics.averageViews}
                       </p>
                     </div>
diff --git a/src/pages/SeriesPage.tsx b/src/pages/SeriesPage.tsx
index 5e1d89b..b8ad46a 100644
--- a/src/pages/SeriesPage.tsx
+++ b/src/pages/SeriesPage.tsx
@@ -159,8 +159,8 @@ export function SeriesPage() {
   const hasFilters = Boolean(query.trim() || selectedSeriesName || sortMode !== "recent")
 
   return (
-    <PageContainer variant="wide">
-      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+    <PageContainer variant="wide" className="@container/taxonomy">
+      <div className="mb-8 flex flex-col flex-wrap gap-4 @min-[32rem]/taxonomy:flex-row @min-[32rem]/taxonomy:items-end @min-[32rem]/taxonomy:justify-between">
         <div>
           <h1 className="text-4xl font-bold tracking-tight">{t.common.series}</h1>
           <p className="mt-3 text-sm text-muted-foreground">
@@ -169,7 +169,7 @@ export function SeriesPage() {
         </div>
 
         {activeSeries && (
-          <Badge variant="outline" className="w-fit rounded-full px-3 py-1 text-sm">
+          <Badge variant="outline" className="max-w-full whitespace-normal break-words rounded-full px-3 py-1 text-sm">
             {t.series.selectedLabel(activeSeries.name)}
           </Badge>
         )}
@@ -187,7 +187,7 @@ export function SeriesPage() {
           />
         </div>
 
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-3 @min-[32rem]/taxonomy:flex-row @min-[32rem]/taxonomy:items-center @min-[32rem]/taxonomy:justify-between">
           <ToggleGroup
             type="single"
             value={sortMode}
@@ -205,7 +205,7 @@ export function SeriesPage() {
               type="button"
               variant="ghost"
               size="sm"
-              className="w-fit self-start sm:self-auto"
+              className="w-fit self-start @min-[32rem]/taxonomy:self-auto"
               onClick={resetFilters}
             >
               <XIcon className="size-3" />
@@ -218,14 +218,14 @@ export function SeriesPage() {
       {allSeries.length === 0 ? (
         <p className="text-muted-foreground">{t.series.noSeries}</p>
       ) : (
-        <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_24rem]">
-          <div className="space-y-9">
+        <div className="grid gap-10 @min-[56rem]/taxonomy:grid-cols-[minmax(0,1fr)_24rem]">
+          <div className="@container/taxonomy-list min-w-0 space-y-9">
             <section>
               <div className="mb-3 flex items-center justify-between gap-4">
                 <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                   {t.series.topSeries}
                 </h2>
-                <span className="hidden text-xs text-muted-foreground sm:inline">{t.series.topSeriesNote}</span>
+                <span className="hidden text-xs text-muted-foreground @min-[32rem]/taxonomy-list:inline">{t.series.topSeriesNote}</span>
               </div>
 
               {matchingSeries.length === 0 ? (
@@ -236,7 +236,7 @@ export function SeriesPage() {
                     <Link
                       key={series.name}
                       to={seriesPathFor(series.name)}
-                      className="grid min-h-20 grid-cols-1 gap-1 border-b py-4 transition-colors hover:bg-accent/40 sm:grid-cols-[minmax(0,1fr)_5rem_7rem] sm:items-center sm:gap-4 sm:px-0"
+                      className="grid min-h-20 grid-cols-1 gap-1 border-b py-4 transition-colors hover:bg-accent/40 @min-[28rem]/taxonomy-list:grid-cols-[minmax(0,1fr)_5rem_7rem] @min-[28rem]/taxonomy-list:items-center @min-[28rem]/taxonomy-list:gap-4"
                     >
                       <span className="min-w-0">
                         <span className="flex min-w-0 items-center gap-2 font-medium">
@@ -271,7 +271,7 @@ export function SeriesPage() {
               {groupedSeries.length === 0 ? (
                 <p className="text-sm text-muted-foreground">{t.series.noMatchingSeries}</p>
               ) : (
-                <div className="grid gap-x-8 gap-y-7 sm:grid-cols-2">
+                <div className="grid gap-x-8 gap-y-7 @min-[28rem]/taxonomy-list:grid-cols-2">
                   {groupedSeries.map((group) => (
                     <div key={group.id} className="min-w-0">
                       <h3 className="mb-3 text-base font-semibold">{group.label}</h3>
@@ -295,9 +295,9 @@ export function SeriesPage() {
           </div>
 
           {activeSeries && (
-            <aside className="border-t pt-8 lg:sticky lg:top-20 lg:border-l lg:border-t-0 lg:pl-7 lg:pt-0">
+            <aside className="min-w-0 border-t pt-8 @min-[56rem]/taxonomy:sticky @min-[56rem]/taxonomy:top-20 @min-[56rem]/taxonomy:border-l @min-[56rem]/taxonomy:border-t-0 @min-[56rem]/taxonomy:pl-7 @min-[56rem]/taxonomy:pt-0">
               <div className="mb-2 flex items-start justify-between gap-3">
-                <h2 className="break-keep text-3xl font-bold tracking-tight">{activeSeries.name}</h2>
+                <h2 className="min-w-0 break-keep text-3xl font-bold tracking-tight [overflow-wrap:anywhere]">{activeSeries.name}</h2>
                 <Badge className="shrink-0 rounded-full">{t.series.postCountShort(activeSeries.postCount)}</Badge>
               </div>
 
diff --git a/src/pages/TagsPage.tsx b/src/pages/TagsPage.tsx
index 35d4173..5a78838 100644
--- a/src/pages/TagsPage.tsx
+++ b/src/pages/TagsPage.tsx
@@ -206,8 +206,8 @@ export function TagsPage() {
   const hasFilters = Boolean(query.trim() || selectedTag || sortMode !== "popular")
 
   return (
-    <PageContainer variant="wide">
-      <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+    <PageContainer variant="wide" className="@container/taxonomy">
+      <div className="mb-8 flex flex-col flex-wrap gap-4 @min-[32rem]/taxonomy:flex-row @min-[32rem]/taxonomy:items-end @min-[32rem]/taxonomy:justify-between">
         <div>
           <h1 className="text-4xl font-bold tracking-tight">{t.common.tags}</h1>
           <p className="mt-3 text-sm text-muted-foreground">
@@ -216,7 +216,7 @@ export function TagsPage() {
         </div>
 
         {selectedStats && (
-          <Badge variant="outline" className="w-fit rounded-full px-3 py-1 text-sm">
+          <Badge variant="outline" className="max-w-full whitespace-normal break-words rounded-full px-3 py-1 text-sm">
             {t.tags.selectedLabel(selectedStats.tag)}
           </Badge>
         )}
@@ -234,7 +234,7 @@ export function TagsPage() {
           />
         </div>
 
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex flex-col gap-3 @min-[32rem]/taxonomy:flex-row @min-[32rem]/taxonomy:items-center @min-[32rem]/taxonomy:justify-between">
           <ToggleGroup
             type="single"
             value={sortMode}
@@ -252,7 +252,7 @@ export function TagsPage() {
               type="button"
               variant="ghost"
               size="sm"
-              className="w-fit self-start sm:self-auto"
+              className="w-fit self-start @min-[32rem]/taxonomy:self-auto"
               onClick={resetFilters}
             >
               <XIcon className="size-3" />
@@ -265,14 +265,14 @@ export function TagsPage() {
       {tagStats.length === 0 ? (
         <p className="text-muted-foreground">{t.tags.noTags}</p>
       ) : (
-        <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_24rem]">
-          <div className="space-y-9">
+        <div className="grid gap-10 @min-[56rem]/taxonomy:grid-cols-[minmax(0,1fr)_24rem]">
+          <div className="@container/taxonomy-list min-w-0 space-y-9">
             <section>
               <div className="mb-3 flex items-center justify-between gap-4">
                 <h2 className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
                   {t.tags.topTags}
                 </h2>
-                <span className="hidden text-xs text-muted-foreground sm:inline">{t.tags.topTagsNote}</span>
+                <span className="hidden text-xs text-muted-foreground @min-[32rem]/taxonomy-list:inline">{t.tags.topTagsNote}</span>
               </div>
 
               {visibleTopTags.length === 0 ? (
@@ -283,14 +283,14 @@ export function TagsPage() {
                     <Link
                       key={stats.tag}
                       to={tagsPathFor(stats.tag)}
-                      className="grid min-h-14 grid-cols-1 gap-1 border-b py-3 transition-colors hover:bg-accent/40 sm:grid-cols-[minmax(0,1fr)_5rem_7rem] sm:items-center sm:gap-4 sm:px-0"
+                      className="grid min-h-14 grid-cols-1 gap-1 border-b py-3 transition-colors hover:bg-accent/40 @min-[28rem]/taxonomy-list:grid-cols-[minmax(0,1fr)_5rem_7rem] @min-[28rem]/taxonomy-list:items-center @min-[28rem]/taxonomy-list:gap-4"
                     >
                       <span className="flex min-w-0 items-center gap-2 font-medium">
                         <span
                           className={
                             selectedTag === stats.tag
-                              ? "size-2 rounded-full bg-foreground"
-                              : "size-2 rounded-full bg-muted-foreground/25"
+                              ? "size-2 shrink-0 rounded-full bg-foreground"
+                              : "size-2 shrink-0 rounded-full bg-muted-foreground/25"
                           }
                         />
                         <span className="truncate">{stats.tag}</span>
@@ -313,7 +313,7 @@ export function TagsPage() {
               {groupedTags.length === 0 ? (
                 <p className="text-sm text-muted-foreground">{t.tags.noMatchingTags}</p>
               ) : (
-                <div className="grid gap-x-8 gap-y-7 sm:grid-cols-2">
+                <div className="grid gap-x-8 gap-y-7 @min-[28rem]/taxonomy-list:grid-cols-2">
                   {groupedTags.map((group) => (
                     <div key={group.id} className="min-w-0">
                       <h3 className="mb-3 text-base font-semibold">{group.label}</h3>
@@ -337,7 +337,7 @@ export function TagsPage() {
           </div>
 
           {activeStats && (
-            <aside className="border-t pt-8 lg:sticky lg:top-20 lg:border-l lg:border-t-0 lg:pl-7 lg:pt-0">
+            <aside className="min-w-0 border-t pt-8 @min-[56rem]/taxonomy:sticky @min-[56rem]/taxonomy:top-20 @min-[56rem]/taxonomy:border-l @min-[56rem]/taxonomy:border-t-0 @min-[56rem]/taxonomy:pl-7 @min-[56rem]/taxonomy:pt-0">
               <div className="mb-2 flex items-start justify-between gap-3">
                 <h2 className="break-all text-3xl font-bold tracking-tight">{activeStats.tag}</h2>
                 <Badge className="shrink-0 rounded-full">{t.tags.postCount(activeStats.count)}</Badge>
@@ -389,7 +389,7 @@ export function TagsPage() {
                 </div>
               </div>
 
-              <Button asChild variant="outline" className="mt-5 w-full">
+              <Button asChild variant="outline" className="mt-5 h-auto min-h-9 w-full whitespace-normal">
                 <Link to={localizePath(`/posts?tag=${encodeURIComponent(activeStats.tag)}`, language)}>
                   {t.tags.viewInPosts(activeStats.tag)}
                 </Link>
diff --git a/tests/browser/layout.spec.ts b/tests/browser/layout.spec.ts
new file mode 100644
index 0000000..586a2e0
--- /dev/null
+++ b/tests/browser/layout.spec.ts
@@ -0,0 +1,223 @@
+import { test, expect, type Locator, type Page } from "@playwright/test"
+
+type Language = "ko" | "en"
+const languages: Language[] = ["ko", "en"]
+const articlePath = "/posts/i18n-01-foundation/"
+const localized = (path: string, language: Language) => language === "en" ? `/en${path}` : path
+
+test.beforeEach(async ({ page }) => {
+  await page.emulateMedia({ colorScheme: "light", reducedMotion: "reduce" })
+  await page.route("**/*", route => {
+    const url = new URL(route.request().url())
+    if (url.hostname === "127.0.0.1") return route.continue()
+    if (url.hostname === "script.google.com") return route.fulfill({ json: { totalViews: 8, pages: {}, daily: [] } })
+    return route.abort()
+  })
+  await page.addInitScript(() => {
+    if (window.top !== window) return
+    localStorage.setItem("theme", "light")
+    localStorage.setItem("language", location.pathname.startsWith("/en/") ? "en" : "ko")
+  })
+})
+
+async function setSidebar(page: Page, language: Language, collapsed: boolean) {
+  const sidebar = page.locator('[data-slot="sidebar"]').first()
+  const state = collapsed ? "collapsed" : "expanded"
+  if (await sidebar.getAttribute("data-state") !== state) {
+    await page.getByRole("button", {
+      name: language === "ko" ? collapsed ? "사이드바 접기" : "사이드바 펼치기" : collapsed ? "Collapse sidebar" : "Expand sidebar",
+      exact: true,
+    }).click()
+  }
+  await expect(sidebar).toHaveAttribute("data-state", state)
+  await expect.poll(() => page.locator('[data-slot="sidebar-container"]').evaluate(el => el.getBoundingClientRect().width)).toBe(collapsed ? 48 : 256)
+}
+
+async function expectNoHorizontalOverflow(page: Page) {
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
+}
+
+async function expectInside(container: Locator, children: Locator) {
+  const bounds = await container.boundingBox()
+  expect(bounds).not.toBeNull()
+  const items = await children.evaluateAll(elements => elements.map(element => {
+    const rect = element.getBoundingClientRect()
+    return { text: element.textContent?.trim(), x: rect.x, right: rect.right, width: rect.width }
+  }))
+  expect(items.length).toBeGreaterThan(0)
+  for (const item of items) {
+    expect(item.width, item.text).toBeGreaterThan(0)
+    expect(item.x, item.text).toBeGreaterThanOrEqual(bounds!.x - 1)
+    expect(item.right, item.text).toBeLessThanOrEqual(bounds!.x + bounds!.width + 1)
+  }
+}
+
+for (const language of languages) {
+  test(`desktop reader keeps its center while expanding to 912px: ${language}`, async ({ page }) => {
+    await page.setViewportSize({ width: 1792, height: 1000 })
+    await page.goto(localized(articlePath, language))
+    await expect(page.locator(".post-toc-panel")).toBeVisible()
+    for (const collapsed of [false, true]) {
+      await setSidebar(page, language, collapsed)
+      const { layout, article, toc, sidebar } = await page.evaluate(() => {
+        const rect = (selector: string) => {
+          const bounds = document.querySelector(selector)!.getBoundingClientRect()
+          return { x: bounds.x, width: bounds.width }
+        }
+        return { layout: rect(".post-page-layout"), article: rect("article"), toc: rect(".post-toc-layer"), sidebar: rect('[data-slot="sidebar-container"]') }
+      })
+      expect(layout!.width).toBeCloseTo(1152, 0)
+      expect(article!.width).toBeCloseTo(912, 0)
+      expect(toc!.width).toBeCloseTo(208, 0)
+      expect(toc!.x - article!.x - article!.width).toBeCloseTo(32, 0)
+      expect(sidebar!.width).toBe(collapsed ? 48 : 256)
+      expect(layout!.x + layout!.width / 2).toBeCloseTo(collapsed ? 920 : 1024, 0)
+      expect(article!.x + article!.width / 2).toBeCloseTo(collapsed ? 800 : 904, 0)
+      await expectNoHorizontalOverflow(page)
+    }
+  })
+
+  for (const width of [1024, 1100]) {
+    test(`tag and series names remain readable beside metadata at ${width}px: ${language}`, async ({ page }) => {
+      await page.setViewportSize({ width, height: 1000 })
+      for (const path of ["/tags/", "/series/"]) {
+        await page.goto(localized(path, language))
+        await expect(page.locator("main h1")).toBeVisible()
+        for (const collapsed of [false, true]) {
+          await setSidebar(page, language, collapsed)
+          const rows = page.locator(`main a[href*="${path}"]:has(> time[datetime])`)
+          const measurements = await rows.evaluateAll(elements => elements.map(row => {
+            const rect = row.getBoundingClientRect()
+            const nameColumn = row.children[0]!
+            const name = nameColumn.querySelector(".truncate")!
+            const nameRect = name.getBoundingClientRect()
+            const nameStyle = getComputedStyle(name)
+            return {
+              name: name.textContent,
+              nameColumnWidth: nameColumn.getBoundingClientRect().width,
+              nameHeight: nameRect.height,
+              fontSize: parseFloat(nameStyle.fontSize),
+              lineHeight: parseFloat(nameStyle.lineHeight),
+              children: Array.from(row.children).map(child => {
+                const bounds = child.getBoundingClientRect()
+                return { text: child.textContent?.trim(), left: bounds.left - rect.left, right: bounds.right - rect.right, overflow: child.scrollWidth > child.clientWidth + 1 }
+              }),
+            }
+          }))
+          expect(measurements.length).toBeGreaterThan(0)
+          for (const row of measurements) {
+            expect(row.nameColumnWidth, row.name ?? "name column").toBeGreaterThanOrEqual(80)
+            expect(row.nameHeight, row.name ?? "name height").toBeGreaterThanOrEqual(row.fontSize * .8)
+            expect(row.nameHeight, row.name ?? "name height").toBeLessThanOrEqual(row.lineHeight + 1)
+            for (const child of row.children) {
+              expect(child.left, child.text).toBeGreaterThanOrEqual(-1)
+              expect(child.right, child.text).toBeLessThanOrEqual(1)
+              expect(child.overflow, child.text).toBe(false)
+            }
+          }
+          await expectNoHorizontalOverflow(page)
+        }
+      }
+    })
+  }
+
+  test(`tablet profile controls and analytics values stay inside their containers: ${language}`, async ({ page }) => {
+    await page.setViewportSize({ width: 768, height: 1000 })
+    const fixture = {
+      totalViews: 9876543,
+      pages: Object.fromEntries(languages.flatMap(locale => [
+        [localized("/posts/i18n-01-foundation", locale), 1234567],
+        [localized("/posts/i18n-04-backend-locale", locale), 765432],
+        [localized("/posts/react-hooks-deep-dive", locale), 456789],
+      ])),
+      daily: Array.from({ length: 35 }, (_, index) => ({ date: new Date(Date.now() - index * 86400000).toISOString().slice(0, 10), views: 123456 + index })),
+      lastUpdated: new Date().toISOString(),
+    }
+    await page.route("https://script.google.com/**", route => route.fulfill({ json: fixture }))
+    await page.addInitScript(data => {
+      if (window.top !== window) return
+      sessionStorage.setItem("page-views", JSON.stringify(data))
+      sessionStorage.setItem("page-views-ts", String(Date.now()))
+    }, fixture)
+    for (const collapsed of [false, true]) {
+      await page.goto(localized("/about/", language))
+      await setSidebar(page, language, collapsed)
+      const container = page.locator("main .page-container")
+      const profile = container.locator(":scope > div").first()
+      await expectInside(container, profile.locator('[data-slot="button"], a[href^="mailto:"], a[href^="tel:"]'))
+      await expectNoHorizontalOverflow(page)
+
+      await page.goto(localized("/analytics/", language))
+      await expect(page.locator('main [data-slot="card"]').first()).toContainText("9,876,543")
+      const cards = page.locator('main [data-slot="card-content"]')
+      const violations = await cards.evaluateAll(elements => elements.flatMap(content => {
+        const bounds = content.getBoundingClientRect()
+        const violations: string[] = []
+        for (const element of Array.from(content.querySelectorAll("p, a, span"))) {
+          if (element.closest(".recharts-wrapper") || !element.getClientRects().length) continue
+          const rect = element.getBoundingClientRect()
+          const label = element.textContent?.trim() ?? element.tagName
+          if (rect.left < bounds.left - 1 || rect.right > bounds.right + 1) violations.push(`element outside card: ${label}`)
+          if (getComputedStyle(element).overflowX === "hidden") continue
+          for (const node of Array.from(element.childNodes)) {
+            if (node.nodeType !== Node.TEXT_NODE || !node.textContent?.trim()) continue
+            const range = document.createRange()
+            range.selectNode(node)
+            for (const textRect of Array.from(range.getClientRects())) if (textRect.left < bounds.left - 1 || textRect.right > bounds.right + 1) violations.push(`text outside card: ${label}`)
+          }
+        }
+        return violations
+      }))
+      expect(violations).toEqual([])
+      await expectNoHorizontalOverflow(page)
+    }
+  })
+
+  for (const width of [390, 768, 1279]) {
+    for (const collapsed of width === 1279 ? [false, true] : [false]) {
+      test(`article title is stable from styled SSR through hydration at ${width}px, ${collapsed ? "collapsed" : "expanded"}: ${language}`, async ({ page, context }) => {
+        await page.setViewportSize({ width, height: 1000 })
+        await context.addCookies([{ name: "sidebar_state", value: String(!collapsed), url: "http://127.0.0.1:4173/" }])
+        const errors: string[] = []
+        page.on("pageerror", error => errors.push(error.message))
+        page.on("console", message => { if (/hydration|React error #418/i.test(message.text())) errors.push(message.text()) })
+        let releaseScripts!: () => void
+        const scriptsReleased = new Promise<void>(resolve => { releaseScripts = resolve })
+        await page.route("**/assets/**", async route => {
+          if (route.request().resourceType() === "script") await scriptsReleased
+          return route.continue()
+        })
+        await page.goto(localized(articlePath, language), { waitUntil: "commit" })
+        const title = page.locator("article h1")
+        await expect(title).toBeVisible()
+        await expect.poll(() => page.locator("#main-content").evaluate(el => getComputedStyle(el).paddingTop)).toBe("32px")
+        const before = await title.boundingBox()
+        const titleText = await title.textContent()
+        await page.evaluate(() => {
+          const state = window as unknown as Window & { titleFrames: { x: number; y: number; width: number; height: number }[]; stopTitleSampling: boolean }
+          state.titleFrames = []
+          state.stopTitleSampling = false
+          const sample = () => {
+            const rect = document.querySelector("article h1")!.getBoundingClientRect()
+            state.titleFrames.push({ x: rect.x, y: rect.y, width: rect.width, height: rect.height })
+            if (!state.stopTitleSampling) requestAnimationFrame(sample)
+          }
+          sample()
+        })
+        releaseScripts()
+        await expect(page.locator(".post-toc-panel a").first()).toBeAttached()
+        await page.evaluate(() => new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve()))))
+        const frames = await page.evaluate(() => {
+          const state = window as unknown as Window & { titleFrames: { x: number; y: number; width: number; height: number }[]; stopTitleSampling: boolean }
+          state.stopTitleSampling = true
+          return state.titleFrames
+        })
+        expect(frames.length).toBeGreaterThan(1)
+        for (const frame of frames) for (const axis of ["x", "y", "width", "height"] as const) expect(frame[axis], `${axis} during hydration`).toBeCloseTo(before![axis], 0)
+        await expect(title).toHaveText(titleText!)
+        expect(errors).toEqual([])
+        await expectNoHorizontalOverflow(page)
+      })
+    }
+  }
+}
diff --git a/tests/browser/reader.spec.ts b/tests/browser/reader.spec.ts
index 7506734..e63cb21 100644
--- a/tests/browser/reader.spec.ts
+++ b/tests/browser/reader.spec.ts
@@ -32,7 +32,7 @@ test("shared article anchor and TOC preserve the target URL", async ({ page }) =
   const heading = page.locator(`[id="${anchor}"]`)
   await expect(heading).toBeInViewport()
   await expect(page.locator(".post-toc-panel")).toBeVisible()
-  expect(await page.locator("article").evaluate(el => el.getBoundingClientRect().width)).toBeLessThanOrEqual(800)
+  expect(await page.locator("article").evaluate(el => el.getBoundingClientRect().width)).toBeLessThanOrEqual(912)
   const link = page.locator(".post-toc-panel a").first()
   await link.click()
   const href = await link.getAttribute("href")