공개 화면 테마와 패널 구조 보정

components/site/LeftSidebar.vue

@@ -1,23 +1,105 @@
 <template>
-  <aside class="left-sidebar hidden w-[287px] lg:block">
-    <div class="left-sidebar__block py-3 pl-0 pr-3">
-      <p class="left-sidebar__eyebrow text-xs font-semibold uppercase text-muted">
-        Categories
-      </p>
-      <nav class="left-sidebar__nav mt-4 grid gap-2 text-sm">
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/dev">
-          DEV
+  <aside class="left-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
+    <div class="left-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
+      <div class="left-sidebar__block site-sidebar-section py-3 pl-0 pr-3">
+        <nav class="left-sidebar__nav grid gap-1 text-[15px]">
+          <NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/">
+            <span>Home pages</span>
+            <span>⌄</span>
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/tags/note">
+            Tags
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/about">
+            Authors
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/posts/hello-sori-studio">
+            Style
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/posts/custom-writing-tool">
+            <span>Post types</span>
+            <span>⌄</span>
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/pages/contact">
+            <span>Members</span>
+            <span>⌄</span>
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/projects">
+            Landing pages
+          </NuxtLink>
+        </nav>
+      </div>
+
+      <div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
+        <div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
+          <span>Categories</span>
+          <span>⌃</span>
+        </div>
+        <div class="left-sidebar__category-grid mt-4 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/books">
+            <span class="h-4 w-1 rounded-full bg-orange-500" /> Books
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/business">
+            <span class="h-4 w-1 rounded-full bg-indigo-500" /> Business
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/dev">
+            <span class="h-4 w-1 rounded-full bg-cyan-500" /> Tech
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/science">
+            <span class="h-4 w-1 rounded-full bg-teal-400" /> Science
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/design">
+            <span class="h-4 w-1 rounded-full bg-fuchsia-500" /> Design
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/music">
+            <span class="h-4 w-1 rounded-full bg-pink-500" /> Music
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/health">
+            <span class="h-4 w-1 rounded-full bg-green-500" /> Health
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/play">
+            <span class="h-4 w-1 rounded-full bg-violet-500" /> Gaming
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/travel">
+            <span class="h-4 w-1 rounded-full bg-purple-500" /> Travel
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/diy">
+            <span class="h-4 w-1 rounded-full bg-yellow-400" /> DIY
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
+        <div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
+          <span>Authors</span>
+          <span>⌃</span>
+        </div>
+        <div class="left-sidebar__authors mt-4 grid gap-4 text-sm">
+          <div class="left-sidebar__author flex items-center gap-3">
+            <span class="h-8 w-8 rounded-full bg-[#e7c49d]" />
+            <span><strong class="block">sori</strong><span class="site-soft">Editor</span></span>
+          </div>
+          <div class="left-sidebar__author flex items-center gap-3">
+            <span class="h-8 w-8 rounded-full bg-[#98b7d5]" />
+            <span><strong class="block">zenn</strong><span class="site-soft">Writer</span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="left-sidebar__footer flex items-center justify-between px-1 py-4 text-xs">
+      <nav class="left-sidebar__footer-nav flex gap-4">
+        <NuxtLink to="/pages/links">
+          Portal
         </NuxtLink>
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/note">
-          NOTE
+        <NuxtLink to="/pages/about">
+          Docs
         </NuxtLink>
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/review">
-          REVIEW
-        </NuxtLink>
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/play">
-          PLAY
+        <NuxtLink to="/pages/projects">
+          Projects
         </NuxtLink>
       </nav>
-    </div>
+      <span class="left-sidebar__theme-dot">☾</span>
+    </footer>
   </aside>
 </template>

components/site/PostCard.vue

@@ -9,18 +9,21 @@ defineProps({
 
 <template>
   <article class="post-card site-section">
-    <div class="post-card__body site-section-body">
-      <p class="post-card__meta text-xs font-semibold uppercase text-muted">
-        {{ post.tag }} · {{ post.publishedAt }}
-      </p>
-      <h2 class="post-card__title mt-3 text-2xl font-semibold leading-tight">
-        <NuxtLink class="post-card__title-link hover:text-muted" :to="post.to">
-          {{ post.title }}
-        </NuxtLink>
-      </h2>
-      <p class="post-card__excerpt mt-3 text-sm leading-6 text-muted">
-        {{ post.excerpt }}
-      </p>
+    <div class="post-card__body site-section-body flex gap-4">
+      <div class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-[linear-gradient(135deg,#06333a,#f4a261)]" />
+      <div class="post-card__content min-w-0">
+        <h2 class="post-card__title text-base font-semibold leading-tight">
+          <NuxtLink class="post-card__title-link hover:opacity-70" :to="post.to">
+            {{ post.title }}
+          </NuxtLink>
+        </h2>
+        <p class="post-card__excerpt mt-2 text-sm leading-6 site-muted">
+          {{ post.excerpt }}
+        </p>
+        <p class="post-card__meta mt-2 text-xs site-muted">
+          {{ post.publishedAt }} / {{ post.tag }}
+        </p>
+      </div>
     </div>
   </article>
 </template>

components/site/RightSidebar.vue

@@ -1,17 +1,73 @@
 <template>
-  <aside class="right-sidebar hidden w-[287px] lg:block">
-    <div class="right-sidebar__block py-5 pl-5 pr-0">
-      <p class="right-sidebar__eyebrow text-xs font-semibold uppercase text-muted">
-        Portal
-      </p>
-      <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
-        <NuxtLink class="right-sidebar__link hover:text-muted" to="/pages/projects">
-          Projects
-        </NuxtLink>
-        <NuxtLink class="right-sidebar__link hover:text-muted" to="/pages/contact">
-          Contact
+  <aside class="right-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
+    <div class="right-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <div class="right-sidebar__profile flex items-center gap-3">
+          <div class="right-sidebar__logo grid h-12 w-12 place-items-center rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
+            井
+          </div>
+          <div>
+            <p class="right-sidebar__title font-semibold">
+              sori.studio
+            </p>
+            <p class="right-sidebar__description text-sm site-muted">
+              Thoughts, stories and ideas.
+            </p>
+          </div>
+        </div>
+        <form class="right-sidebar__subscribe mt-4 flex gap-2">
+          <input class="right-sidebar__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
+          <button class="right-sidebar__button rounded-lg px-4 py-2 text-sm font-semibold site-button" type="button">
+            Subscribe
+          </button>
+        </form>
+      </div>
+
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <div class="right-sidebar__row flex items-center justify-between">
+          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
+            Follow
+          </p>
+          <div class="right-sidebar__social flex gap-3 text-sm">
+            <span>f</span>
+            <span>𝕏</span>
+            <span>rss</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <div class="right-sidebar__row flex items-center justify-between">
+          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
+            Recommended
+          </p>
+          <span>↗</span>
+        </div>
+        <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
+          <NuxtLink class="right-sidebar__link font-semibold" to="/posts/hello-sori-studio">
+            sori.studio 첫 글과 방향
+          </NuxtLink>
+          <NuxtLink class="right-sidebar__link font-semibold" to="/pages/projects">
+            Projects and services
+          </NuxtLink>
+          <NuxtLink class="right-sidebar__link font-semibold" to="/pages/links">
+            Links and portal
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <p class="right-sidebar__about text-sm leading-6 site-muted">
+          sori.studio는 글과 프로젝트 링크를 한 곳에 쌓아두는 개인 블로그/CMS입니다.
+        </p>
+        <NuxtLink class="right-sidebar__about-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold site-accent-button" to="/pages/about">
+          About sori.studio
         </NuxtLink>
       </div>
     </div>
+
+    <footer class="right-sidebar__footer py-4 pl-5 pr-0 text-xs site-muted">
+      ©2026 sori.studio
+    </footer>
   </aside>
 </template>

components/site/SiteHeader.vue

@@ -1,18 +1,21 @@
 <template>
-  <header class="site-header sticky top-0 z-20 h-[57px] border-b border-line bg-paper/95 backdrop-blur">
+  <header class="site-header sticky top-0 z-20 backdrop-blur">
     <div class="site-header__inner mx-auto flex h-full max-w-[1294px] items-center justify-between px-4 lg:px-0">
-      <NuxtLink class="site-header__brand text-[19px] font-semibold tracking-normal" to="/">
+      <NuxtLink class="site-header__brand flex items-center gap-2 text-[18px] font-semibold tracking-normal" to="/">
+        <span class="site-header__brand-mark inline-block h-5 w-4 rounded-sm bg-[var(--site-text)]" />
         sori.studio
       </NuxtLink>
-      <nav class="site-header__nav flex items-center gap-5 text-sm text-muted">
+      <div class="site-header__search hidden h-9 w-[470px] items-center rounded-lg px-3 text-sm md:flex site-input">
+        <span class="site-header__search-icon mr-2 text-lg leading-none">⌕</span>
+        <span class="site-header__search-text site-soft">Search</span>
+        <span class="site-header__search-key ml-auto rounded-md px-2 text-xs site-soft site-input">/</span>
+      </div>
+      <nav class="site-header__nav flex items-center gap-3 text-sm">
+        <NuxtLink class="site-header__buy site-accent-button rounded-lg px-4 py-2 font-semibold" to="/pages/about">
+          Subscribe
+        </NuxtLink>
         <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/about">
-          About
-        </NuxtLink>
-        <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/links">
-          Links
-        </NuxtLink>
-        <NuxtLink class="site-header__nav-link hover:text-ink" to="/admin">
-          Admin
+          Account
         </NuxtLink>
       </nav>
     </div>