# 기술 명세 ## 현재 버전 - `v0.1.27` ## 테마 개요 - Ghost `v5` 대응 커스텀 테마 - 참고 사이트 `https://thred.brightthemes.com/` 기반의 3열 에디토리얼 레이아웃 - 좌측 탐색, 중앙 콘텐츠, 우측 구독/추천/작성자 패널 구조 ## 구현 범위 - `default.hbs` 기반 공통 셸 - `home`, `index`, `tag`, `author`, `post`, `page` 템플릿 - 검색 오버레이, 탭 전환, 다크모드 토글용 프런트 스크립트 - Ghost `navigation`, `get`, `subscribe_form`, `comments`, `pagination` 헬퍼 사용 - Tailwind CSS 빌드 결과물(`assets/built/tailwind.css`)을 기존 `screen.css`와 함께 로드 - Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드 - 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘 - 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용 - 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용 - `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용 - `page-tags.hbs`, `page-authors.hbs`는 각각 `slug=tags`, `slug=authors` 페이지에 연결 가능 - 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준 - `tags-index.hbs`, `authors-index.hbs`는 `routes.yaml` 커스텀 라우트로 `/tags/`, `/authors/`에 연결 가능 - 홈 메인 피드는 히어로, 탭형 목록, 카테고리 개요를 원본 비주얼 밀도에 가깝게 재구성 - 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용 - 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어 ## 주요 스타일 방향 - 밝은 크림톤 배경 + 오렌지 포인트 - 테두리 중심의 미니멀 편집형 UI - 데스크톱 3열, 태블릿 2열, 모바일 1열 반응형 - Tailwind는 점진적으로 도입하고, 기존 구조 클래스와 병행 사용