# 기술 명세

## 현재 버전
- `v0.2.3`

## 테마 개요
- 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`와 함께 로드
- Tailwind 기본 초기화(`preflight`)를 활성화해 브라우저 기본 마진과 폼 스타일을 리셋
- Alpine.js 로컬 자산(`assets/built/alpine.js`)을 전역 로드
- `npm run dev:watch`는 초기 `dev:prepare` 실행 후 Tailwind `--watch`와 파일 변경 감지 기반 `dev:sync`를 함께 실행함
- 로컬 Docker 구성은 Mailpit SMTP(`mailpit:1025`)를 사용하도록 설정되어 멤버/댓글 알림 메일을 로컬 수신함
- `npm run zip:version`은 현재 `package.json` 버전명을 기준으로 업로드용 zip을 생성함
- 좌측 카테고리 영역은 Alpine.js로 제어되며 `1024px` 이상에서 기본 열림, 미만에서 기본 닫힘
- 좌측 카테고리 목록은 `data-category-priority-order`에 지정한 태그 slug를 우선순위로 먼저 배치하고, 나머지는 `count.posts desc` 기본 순서를 유지한 뒤 제한 개수만 노출함
- 좌측 네비게이션 마커와 카테고리 마커는 동일한 세로 바 → 원형 hover 패턴 사용
- 전역 `ol`, `ul`, `menu` 기본 패딩과 리스트 스타일 리셋 적용
- `author.hbs`는 페이지 컨텍스트의 작성자 데이터를 직접 사용
- `page-tags.hbs`는 `slug=tags` 페이지에 연결 가능
- 태그/작성자 디렉터리 목록은 현재 `limit="100"` 기준
- `tags-index.hbs`는 Ghost `routes.yaml` 커스텀 라우트로 `/tags/`에 연결됨
- 로컬 개발 환경의 실제 라우트 설정은 `.docker/ghost/content/settings/routes.yaml`을 기준으로 사용함
- 홈 메인 피드는 히어로, Featured 수평 슬라이드, Latest 리스트 구성을 사용함
- 태그·작성자 아카이브(`tag.hbs`, `author.hbs`)는 홈과 동일한 `post-feed`를 쓰지 않고, `post-feed-archive`로 글 목록과 페이지네이션만 노출함
- 우측 사이드바 `Recommended` 섹션은 Ghost `recommendations` 데이터를 우선 사용하며, 항목별 외부 링크와 favicon 표시를 지원함
- 포스트 상세 우측 `Read next`는 `primary_tag` 기준 관련 글을 우선 노출하고, 관련 글이 없으면 최신 글(현재 글 제외)로 대체함
- Recommendations Portal 모달의 제목/설명은 트리거 버튼의 `data-portal-title`, `data-portal-description` 값으로 오픈 시점에 동기화함
- 리스트형 `post-card`는 Tailwind 유틸리티 중심 마크업으로 구성되며, 썸네일은 `aspect-square sm:aspect-video` 비율을 사용
- 각 카드 항목은 `border-b border-brd` 구분선을 유지하고, 콘텐츠 래퍼는 `min-w-0` 기준으로 줄바꿈 폭을 제어
- 포스트 상세 헤더는 제목, 메타, 공유 버튼, 대표 이미지를 Tailwind 유틸리티 중심 마크업으로 구성하고 상단 단일 태그 라벨은 표시하지 않음
- 포스트 본문은 `prose prose-theme` 클래스를 사용하며, Typography 플러그인 대신 Tailwind 입력 파일에서 원본 기준 타이포그래피 규칙을 직접 제공함
- 포스트 댓글 영역은 `comments` 활성 여부를 우선 기준으로 노출하며, 활성 시 로그인 멤버는 댓글 0개 상태에서도 `{{comments}}` 입력 UI를 사용함
- 본문 `ul`, `ol`은 전역 리스트 리셋과 별개로 `prose` 범위 안에서 실제 마커와 들여쓰기를 다시 적용함
- 태그 배지는 `--color-accent` 기반 배경 혼합색(`bg-accent/10`, `hover:bg-accent/5`)을 사용함
- 홈 Latest, 기본 index, 태그 아카이브, 작성자 아카이브의 목록 영역은 `Load More` 버튼 기반 확장형 페이지네이션을 사용함
- `body`에 `tag-hash-ld`가 있는 페이지는 좌/우 사이드바를 숨기고, `.site-shell`을 단일 블록(최대 폭 720px)으로 전환함
- `tag-hash-ld` 페이지에서는 `topbar`도 숨겨 랜딩 본문만 노출함
- `tag-hash-ld` 페이지에서는 `.post-header`를 숨기고 페이지 본문만 노출함

## 주요 스타일 방향
- 밝은 크림톤 배경 + 오렌지 포인트
- 테두리 중심의 미니멀 편집형 UI
- 데스크톱 3열, 태블릿 2열, 모바일 1열 반응형
- Tailwind는 점진적으로 도입하고, 기존 구조 클래스와 병행 사용
