개선: CSS 디자인 시스템 및 성능 최적화

- CSS 변수 확장 (색상, 스페이싱, 반응형 브레이크포인트)
- 모든 요소 전환 애니메이션 추가
- 이미지 lazy load 지원
- 응답 압축 (gzip) 활성화
- 폰트 preconnect + DNS prefetch 최적화
- 375px ~ 초소형 화면 반응형 대응
- 게시물 레이아웃 개선 (섹션 구조, 메타데이터)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

TaxBaik.Web/Pages/Blog/Post.cshtml

@@ -4,12 +4,13 @@
     ViewData["Title"] = Model.Post?.SeoTitle ?? Model.Post?.Title;
     ViewData["Description"] = Model.Post?.SeoDescription ?? "";
     ViewData["OgImage"] = Model.Post?.ThumbnailUrl ?? "";
+    ViewData["CanonicalUrl"] = $"http://178.104.200.7/taxbaik/blog/{slug}";
 }
 
 @if (Model.Post != null)
 {
-    <article class="container py-5" style="max-width: 720px;">
-        <nav aria-label="breadcrumb">
+    <article class="container section" style="max-width: 720px;">
+        <nav aria-label="breadcrumb" class="mb-4">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href="/taxbaik">홈</a></li>
                 <li class="breadcrumb-item"><a href="/taxbaik/blog">블로그</a></li>
@@ -17,46 +18,56 @@
             </ol>
         </nav>
 
+        @if (!string.IsNullOrEmpty(Model.Post.ThumbnailUrl))
+        {
+            <img src="@Model.Post.ThumbnailUrl" alt="@Model.Post.Title"
+                loading="lazy" class="img-fluid rounded mb-4" style="max-height: 400px; object-fit: cover; width: 100%;" />
+        }
+
         <h1 class="fw-bold mb-3">@Model.Post.Title</h1>
-        <div class="text-muted small mb-4">
-            <span>@Model.Post.CreatedAt.ToString("yyyy-MM-dd")</span>
-            <span class="ms-3">👁️ @Model.Post.ViewCount</span>
-            <span class="badge bg-primary ms-3">@Model.Post.CategoryName</span>
+        <div class="text-muted small mb-4 d-flex flex-wrap gap-3">
+            <span>📅 @Model.Post.CreatedAt.ToString("yyyy년 MM월 dd일")</span>
+            <span>👁️ @Model.Post.ViewCount 조회</span>
+            <span class="badge bg-primary">@Model.Post.CategoryName</span>
         </div>
 
-        <hr />
+        <hr class="my-4" />
 
-        <div class="article-body">
+        <div class="article-body lh-lg">
             @Html.Raw(Model.Post.Content)
         </div>
 
-        <hr />
+        <hr class="my-4" />
 
         <!-- CTA -->
-        <div class="bg-light p-4 rounded mb-5">
-            <h5 class="fw-bold mb-2">상담이 필요하신가요?</h5>
-            <p class="mb-3">이 글과 관련된 상담이 필요하면 언제든 연락주세요.</p>
-            <a href="/taxbaik/contact" class="btn btn-primary">상담 신청하기</a>
-        </div>
+        <section class="bg-primary-light p-4 rounded mb-5">
+            <h5 class="fw-bold mb-2 text-primary">상담이 필요하신가요?</h5>
+            <p class="mb-3 text-muted">이 글과 관련된 상담이 필요하면 언제든 연락주세요.</p>
+            <a href="/taxbaik/contact" class="btn btn-primary">📞 상담 신청하기</a>
+        </section>
 
         <!-- Share -->
-        <div class="text-center mb-5">
-            <p class="small text-muted">이 글을 공유하세요:</p>
-            <button class="btn btn-sm btn-outline-secondary" onclick="copyUrl()">📋 링크복사</button>
-        </div>
+        <section class="text-center mb-5">
+            <p class="small text-muted mb-3">이 글을 공유하세요:</p>
+            <button class="btn btn-sm btn-outline-primary" onclick="copyUrl()" title="링크 복사">📋 링크복사</button>
+        </section>
     </article>
 }
 else
 {
-    <div class="container py-5 text-center">
+    <section class="container section text-center">
         <p class="fs-5">포스트를 찾을 수 없습니다.</p>
         <a href="/taxbaik/blog" class="btn btn-primary">블로그 돌아가기</a>
-    </div>
+    </section>
 }
 
 <script>
 function copyUrl() {
-    navigator.clipboard.writeText(window.location.href);
-    alert('링크가 복사되었습니다.');
+    navigator.clipboard.writeText(window.location.href).then(() => {
+        const btn = event.target;
+        const originalText = btn.textContent;
+        btn.textContent = '✅ 복사됨';
+        setTimeout(() => btn.textContent = originalText, 2000);
+    });
 }
 </script>