v0.1.22 리스트 리셋 및 카테고리 아이콘 수정

assets/built/screen.css

@@ -86,6 +86,14 @@ input {
     font: inherit;
 }
 
+ol,
+ul,
+menu {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
 .site-shell {
     display: grid;
     grid-template-columns: var(--sidebar-left) minmax(0, 1fr) var(--sidebar-right);
@@ -367,9 +375,18 @@ body.left-sidebar-collapsed .sidebar--left {
 }
 
 .sidebar-card--categories .sidebar-card__chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     transition: transform 0.2s ease;
 }
 
+.sidebar-card--categories .sidebar-card__chevron-icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+}
+
 .sidebar-card--categories .sidebar-card__content--categories {
     padding: 0;
 }

docs/history.md

@@ -1,5 +1,8 @@
 # 의사결정 이력
 
+## 2026-04-14 v0.1.22
+원본 테마와 spacing 차이가 크게 나는 원인 중 하나가 브라우저 기본 리스트 스타일이었다. Tailwind preflight를 끈 상태를 유지하고 있으므로, 필요한 범위의 전역 리셋만 `screen.css`에 수동으로 추가해 기본 `ul`, `ol`, `menu` 패딩과 불릿을 제거했다. 카테고리 화살표는 회전 기반 표현 대신 상태별 아이콘 교체 방식으로 바꿔 원본과 더 가깝게 맞췄다.
+
 ## 2026-04-14 v0.1.21
 카테고리 영역은 기존 JS 아코디언 대신 Alpine.js 문법으로 다시 맞췄다. 원본 테마 코드를 더 직접적으로 참조하는 요구가 생겼고, Tailwind 유틸리티와 Alpine 상태 표현을 함께 쓰는 편이 spacing과 hover 동작을 더 가깝게 재현하기 쉬웠기 때문이다. 또한 Ghost 경고에 맞춰 `limit="all"` 대신 `limit="100"`으로 조정했다.
 

docs/spec.md

@@ -1,7 +1,7 @@
 # 기술 명세
 
 ## 현재 버전
-- `v0.1.21`
+- `v0.1.22`
 
 ## 테마 개요
 - Ghost `v5` 대응 커스텀 테마
@@ -16,6 +16,7 @@
 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드
 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
 - 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
+- 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용
 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용
 - `page-tags.hbs`, `page-authors.hbs`는 각각 `slug=tags`, `slug=authors` 페이지에 연결 가능
 - 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준

docs/update.md

@@ -1,5 +1,9 @@
 # 업데이트 로그
 
+## v0.1.22 - 2026-04-14
+- 전역 리스트 리셋 추가.
+- 카테고리 아코디언 화살표 상태 아이콘 수정.
+
 ## v0.1.21 - 2026-04-14
 - 카테고리 영역 Alpine.js 기반으로 재구성.
 - 원본 기준 카테고리 패딩 및 hover 표현 재정리.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-theme-thred-clone",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "private": true,
   "description": "A Ghost theme inspired by the Thred reference layout.",
   "keywords": [

partials/site/sidebar-left.hbs

@@ -59,8 +59,9 @@
         <section class="sidebar-card sidebar-card--categories border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ categoriesOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { categoriesOpen = window.innerWidth >= 1024 })" data-sidebar-categories>
             <button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="categoriesOpen = !categoriesOpen" :aria-expanded="categoriesOpen.toString()">
                 <span class="sidebar-card__eyebrow uppercase font-medium text-xs">Categories</span>
-                <span class="sidebar-card__chevron" aria-hidden="true" :class="categoriesOpen ? 'rotate-180' : ''">
-                    <img class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
+                <span class="sidebar-card__chevron" aria-hidden="true">
+                    <img x-show="!categoriesOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
+                    <img x-show="categoriesOpen" x-cloak class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
                 </span>
             </button>
             <div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">