merge: design/blog-card(미니블로그 일력 카드) 을 main 에 병합

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

solution/site/src/sections/BlogSection.tsx

@@ -5,21 +5,7 @@ import {isoDate} from '@site/lib/format';
 import {Carousel, CarouselSlide, Modal, Section} from '@site/lib/ui';
 
 /** 미니 블로그 — 사장님이 승인한 짧은 글. */
-type Season = 'spr' | 'sum' | 'aut' | 'win';
+const AUTOPLAY_MS = 7000;
-
-const SEASON_COLOR: Record<Season, string> = {
-  spr: '#4f7942',
-  sum: '#c9820a',
-  aut: '#bf2f1b',
-  win: '#3b6ea5',
-};
-
-function seasonOf(month: number): Season {
-  if (month >= 3 && month <= 5) return 'spr';
-  if (month >= 6 && month <= 8) return 'sum';
-  if (month >= 9 && month <= 11) return 'aut';
-  return 'win';
-}
 
 /** ISO → 한국 시간 기준 월·일·요일. */
 function kstDateParts(iso: string) {
@@ -46,9 +32,9 @@ export function BlogSection() {
       title="미니 블로그"
       lead="사장님이 남기는 숙소 이야기입니다."
     >
-      <Carousel label={`${payload.place.name} 미니 블로그`} align="start" gap={0.875} loop>
+      <Carousel label={`${payload.place.name} 미니 블로그`} align="start" gap={0.875} loop autoplay={AUTOPLAY_MS}>
         {posts.map((post) => (
-          <CarouselSlide key={post.postId} basis="basis-[225px]">
+          <CarouselSlide key={post.postId} basis="basis-[272px]">
             <PostCard post={post} onOpen={() => setOpenId(post.postId)} />
           </CarouselSlide>
         ))}
@@ -65,21 +51,29 @@ export function BlogSection() {
 
 function PostCard({post, onOpen}: {post: PostEntry; onOpen: () => void}) {
   const {month, day, weekday} = kstDateParts(post.publishedAt);
-  const season = seasonOf(month);
-  const color = SEASON_COLOR[season];
-  const dateLabel = `${month}월 ${day}일 · ${weekday}`;
 
   return (
     <button
       type="button"
       onClick={onOpen}
-      className="panel flex aspect-square w-full flex-col gap-2 p-4 text-left"
+      aria-label={`${month}월 ${day}일 ${weekday} 글 열기`}
-      style={{backgroundColor: `color-mix(in srgb, ${color} 9%, var(--tpl-card, #efe7d3))`}}
+      className="panel flex h-full min-h-[17rem] w-full flex-col p-5 text-left"
+      style={{backgroundColor: 'var(--tpl-card)'}}
     >
-      <time dateTime={post.publishedAt} className="block shrink-0 text-[length:var(--fs-xs)] font-bold tracking-wide" style={{color}}>
+      <time dateTime={post.publishedAt} className="flex shrink-0 items-center gap-3">
-        {dateLabel}
+        <span
+          className="text-[2.75rem] leading-none tabular-nums"
+          style={{color: 'var(--tpl-primary)', fontFamily: 'var(--tpl-font-heading)', fontWeight: 'var(--tpl-heading-weight, 700)'}}
+        >
+          {day}
+        </span>
+        <span className="flex flex-col text-[length:var(--fs-xs)] leading-snug opacity-75">
+          <span>{month}월</span>
+          <span>{weekday}</span>
+        </span>
       </time>
-      <p className="line-clamp-5 min-h-0 flex-1 whitespace-pre-line break-keep text-[length:var(--fs-xs)] leading-relaxed">
+      <span aria-hidden className="my-4 block h-px w-full shrink-0" style={{backgroundColor: 'var(--tpl-border, currentColor)', opacity: 0.6}} />
+      <p className="line-clamp-4 min-h-0 whitespace-pre-line break-keep text-[length:var(--fs-body)] leading-relaxed">
         {post.body}
       </p>
     </button>