English {#english}

Runbook English Titles, Bilingual Pages, Mermaid Diagrams, and Content Area Divider Removal Plan

Document: runbook-english-titles-bilingual-pages-divider-removal-plan.md
Target: Prego/docs Astro (Starlight) website
Version: 1.0
Date: 2026-03

1. Overview

1.1 Purpose

Runbook category: Replace any Korean in the document titles of the left-menu Runbook items with English so that the menu is displayed in English.
Page structure: Place each Runbook page body as top: English version + bottom: Korean version to apply a bilingual document structure.
Flow diagrams: Add Mermaid charts (e.g. flowchart) to Runbook documents that describe procedures or flows.
Content area divider removal: Remove the division line (thin gray horizontal line) above the title in the center content area.

1.2 Scope

In scope	Out of scope
`title` frontmatter for all documents in the Runbook category	Introduction / Architecture / Platform / Deployment
Placement of English and Korean sections in each Runbook page body	Changing existing planning document structure
Adding Mermaid to Runbook documents that have flows or procedures	Code or infrastructure changes
Removing the content-area title divider line (CSS/layout) in Starlight	Other menu titles outside the sidebar

2. Current State

Mapping of titles that contain Korean in the Runbook category and the proposed English title:

File (slug)	Current title (includes Korean)	Proposed English title
ansible-clean-and-reinstall	Runbook: Ansible 대상 서버 초기화 후 처음부터 재설치	Runbook: Ansible Clean Install After Target Server Reset
client-web-deploy-otp-verify-email	Runbook: client-web 배포 (x.pregoi.com OTP 검증 화면 반영)	Runbook: client-web Deploy (x.pregoi.com OTP Verification Screen)
cloudflare-step-by-step-check	Runbook: Cloudflare 접속·권한 단계별 점검	Runbook: Cloudflare Access and Permissions Step-by-Step Check
db-redis-scaling-policy-r7	Runbook: DB·Redis 증설·배치 정책 (R7)	Runbook: DB and Redis Scaling and Placement Policy (R7)
ddos-traffic-spike	Runbook: DDoS·트래픽 급증 (Traffic Spike)	Runbook: DDoS and Traffic Spike
dirt-restore-verify	Runbook: DiRT (Disaster Recovery Training) — 복구 검증	Runbook: DiRT (Disaster Recovery Training) — Restore Verification
frappe-v16-rollback	Runbook: Frappe v16 → v15 롤백	Runbook: Frappe v16 → v15 Rollback
logpush-setup	Runbook: Cloudflare Logpush 설정 (R2 목적지)	Runbook: Cloudflare Logpush Setup (R2 Destination)
mariadb-backup-r2	Runbook: MariaDB 백업 → Cloudflare R2 (GTape §3.2, §3.3)	Runbook: MariaDB Backup → Cloudflare R2 (GTape §3.2, §3.3)
mariadb-10.6-to-10.11-migration	(확인 필요)	Runbook: MariaDB 10.6 → 10.11 Migration
otp-email-template-preview	OTP 이메일 템플릿 미리보기	OTP Email Template Preview
passcode-reset-flow-verification	Runbook: Passcode 재설정 플로우 검증 (request-reset → reset-passcode)	Runbook: Passcode Reset Flow Verification (request-reset → reset-passcode)
prego-docker-image-deploy	prego-docker 이미지 서버 배포 (Compose · Digest · Blue/Green)	prego-docker Image Server Deploy (Compose · Digest · Blue/Green)
prego-docker-image-verify	prego-docker 이미지 검증 Runbook	prego-docker Image Verification Runbook
prego-saas-app-trigger-prego-docker	prego_saas → prego-docker 이미지 재빌드 트리거 설정	prego_saas → prego-docker Image Rebuild Trigger Setup
provisioning-failure	Runbook: 테넌트 생성 실패 (Provisioning Failure)	Runbook: Tenant Provisioning Failure

Titles already in English (verify display only, no change): Runbook (index), Email Not Received Troubleshooting (Resend), GitHub Secrets & Environment (PREGO v4.0), PREGO v4.0 Operations Runbook Summary, and other English-only documents.

2.2 Page Body Structure (Current)

Most Runbook documents are written as a single Korean body block.
The “top English, bottom Korean” structure defined in docs-consolidation-and-bilingual-plan is not yet fully applied across Runbook.

2.3 Mermaid Usage

Mermaid blocks are already supported in the build via the astro-mermaid integration.
Only some planning documents (e.g. IMPLEMENTATION_INDEX, tenant-onboarding-flow, provision-tenant-pipeline) use Mermaid; many Runbook documents do not have flow or procedure diagrams.

2.4 Content Area Division Line

Observation: A thin light gray horizontal line (division line) appears above the page title in the center main content area.
Related code: The following is already applied in src/styles/custom.css:
- Hide the first h1 and header inside .sl-markdown-content
- Hide the hr immediately after the first h1, and hr:first-child, hr:nth-child(2)
- Remove top border on .content-panel + .content-panel
Assumption: A divider produced by Starlight’s default layout or another component may remain. The element needs to be identified and defined as the removal target.

3. Requirements Detail

3.1 Runbook Title English-Only

Target: frontmatter title in src/content/docs/runbook/**/*.md.
Rule: Replace Korean phrases in the sidebar string with the “Proposed English title” from the table above. Keep proper nouns (e.g. DiRT, R2, GTape, prego-docker).
Deliverable: Each Runbook document’s title contains only English, or allows Korean only in parenthetical notes (per policy).

3.2 Page Structure: Top English, Bottom Korean

Structure (each Runbook page body):
1. Top: English heading (e.g. ## English) and full English body (steps, tables, notes, etc.).
2. Separator: Clear divider or section heading (e.g. --- and ## 한국어).
3. Bottom: Korean heading and existing Korean body unchanged.
Options:
- Whether to add ids to “English” / “한국어” sections for anchor links.
- For Runbook that is already English-only (e.g. OPERATIONS.md, email-troubleshooting), either leave the Korean section as “(Korean translation to be added)” or only align structure and keep body as-is (policy decision).
Deliverable: All Runbook markdown bodies edited so that the order is “English block → Korean block”.

3.3 Adding Mermaid Flow Diagrams

Target: Runbook documents that have procedures, sequence, state transitions, or deployment flows. Examples:
- provision-tenant-pipeline, tenant-onboarding-flow
- ansible-clean-and-reinstall, prego-docker-image-deploy
- passcode-reset-flow-verification, provisioning-failure
- logpush-setup, mariadb-backup-r2, dirt-restore-verify
- Other procedure-style docs such as “step-by-step check” or “trigger setup”
Format: Use Mermaid flowchart / flowchart LR|TB or sequenceDiagram to show steps, roles, and branches.
Placement: Add a mermaid … block just above or below the paragraph that describes the procedure.
Deliverable: For each document, identify at least one “required flow” and add a Mermaid script. Keep it summary-level so it does not duplicate existing text.

3.4 Content Area Title Divider Removal

Requirement: Remove the division line (thin gray horizontal line) above the title in the main content area.
Approach:
1. Investigate: Identify which element (hr, border-top, ::before, etc.) in Starlight/current layout draws that line.
2. Change: In src/styles/custom.css or the relevant component, hide that element with display: none or border: none, etc.
3. Verify: Confirm that the title divider is not visible on Runbook, Planning, and Deployment pages in all themes (light/dark).
Deliverable: One CSS (or layout) change, with build and visual verification complete.

4. Implementation Phases

Phase 1: Title English-Only and Divider Removal (First)

Step	Task	Deliverable
1.1	Update frontmatter `title` in each Runbook `.md` to English per §2.1 table	`runbook/*/.md`
1.2	Find and remove the element that causes the content-area title division line	`custom.css` or layout component
1.3	Run `pnpm build` and check Runbook menu and top of body in the browser	—

Phase 2: Page Bilingual Structure

Step	Task	Deliverable
2.1	Finalize the “top English body / bottom Korean body” template rule per Runbook document	Plan update or separate style guide
2.2	For Runbook already in English, keep English section only; decide placeholder “(Korean translation to follow)” or omit Korean section	—
2.3	For Korean-only body documents, add an English translation block at the top and move the existing body into the bottom “한국어” section	`runbook/*/.md`
2.4	Check that internal links (anchors, links to other runbook/planning) work in both English and Korean sections	—

Phase 3: Mermaid Diagrams

Step	Task	Deliverable
3.1	Finalize the list of Runbook documents that have flow/procedure and assign at least one diagram per document	Checklist
3.2	Write a Mermaid flowchart (or sequenceDiagram) per document and insert it near the procedure paragraph	`runbook/*/.md`
3.3	Run `pnpm build` and confirm Mermaid rendering and display	—

5. Deliverables and Acceptance

#	Deliverable	Acceptance
1	Runbook sidebar titles	All Runbook menu items display in English only (or only policy-allowed Korean)
2	Runbook page body	Each page has an English section at the top and a Korean section at the bottom
3	Mermaid	At least one Mermaid block added to Runbook documents that need flow; renders correctly on build
4	Division line	The gray horizontal divider above the title in the main content area is not visible

6. References

PREGO Documentation Consolidation and Bilingual Structure Plan — Bilingual structure and organization principles
Starlight Content authoring — frontmatter, markdown
Current divider-related styles: docs/src/styles/custom.css (§ “Hide page title and divider”, “content-panel”)
Runbook directory: docs/src/content/docs/runbook/

This plan describes the plan only before implementation; actual code/content changes are done in separate work.

한국어 {#korean}

Runbook English Titles, Bilingual Pages, Mermaid Diagrams, and Content Area Divider Removal Plan

문서: runbook-english-titles-bilingual-pages-divider-removal-plan.md
대상: Prego/docs Astro(Starlight) 웹사이트
버전: 1.0
날짜: 2026-03

1. 개요 (Overview)

1.1 목적 (Purpose)

Runbook 카테고리: 좌측 메뉴 Runbook 항목의 문서 타이틀에 포함된 한국어를 모두 영어로 변경하여 메뉴 표시를 영문화한다.
페이지 구조: 각 Runbook 페이지 본문을 상단 영어 버전 + 하단 한국어 버전으로 배치하여 이중언어 문서 구조를 적용한다.
플로우 다이어그램: 절차·흐름 설명이 필요한 Runbook 문서에 Mermaid 차트(flowchart 등) 스크립트를 추가한다.
컨텐츠 영역 구분선 제거: 가운데 컨텐츠 영역에서 타이틀 위에 보이는 division line(얇은 회색 수평선)을 제거한다.

1.2 범위 (Scope)

포함 (In scope)	제외 (Out of scope)
Runbook 카테고리 내 모든 문서의 `title` frontmatter	Introduction / Architecture / Platform / Deployment
Runbook 각 페이지 본문의 영어·한국어 섹션 배치	기존 planning 문서 구조 변경
Runbook 내 플로우·절차가 있는 문서에 Mermaid 추가	코드/인프라 변경
Starlight 컨텐츠 영역 타이틀 상단 구분선 제거(CSS/레이아웃)	사이드바 외 다른 메뉴 타이틀

2. 현행 분석 (Current State)

2.1 Runbook 사이드바 타이틀 (한국어 포함 목록)

좌측 메뉴 Runbook 카테고리에 표시되는 문서 타이틀 중 한국어가 포함된 항목과 제안 영어 타이틀 매핑:

파일 (slug)	현재 title (한국어 포함)	제안 영어 title
ansible-clean-and-reinstall	Runbook: Ansible 대상 서버 초기화 후 처음부터 재설치	Runbook: Ansible Clean Install After Target Server Reset
client-web-deploy-otp-verify-email	Runbook: client-web 배포 (x.pregoi.com OTP 검증 화면 반영)	Runbook: client-web Deploy (x.pregoi.com OTP Verification Screen)
cloudflare-step-by-step-check	Runbook: Cloudflare 접속·권한 단계별 점검	Runbook: Cloudflare Access and Permissions Step-by-Step Check
db-redis-scaling-policy-r7	Runbook: DB·Redis 증설·배치 정책 (R7)	Runbook: DB and Redis Scaling and Placement Policy (R7)
ddos-traffic-spike	Runbook: DDoS·트래픽 급증 (Traffic Spike)	Runbook: DDoS and Traffic Spike
dirt-restore-verify	Runbook: DiRT (Disaster Recovery Training) — 복구 검증	Runbook: DiRT (Disaster Recovery Training) — Restore Verification
frappe-v16-rollback	Runbook: Frappe v16 → v15 롤백	Runbook: Frappe v16 → v15 Rollback
logpush-setup	Runbook: Cloudflare Logpush 설정 (R2 목적지)	Runbook: Cloudflare Logpush Setup (R2 Destination)
mariadb-backup-r2	Runbook: MariaDB 백업 → Cloudflare R2 (GTape §3.2, §3.3)	Runbook: MariaDB Backup → Cloudflare R2 (GTape §3.2, §3.3)
mariadb-10.6-to-10.11-migration	(확인 필요)	Runbook: MariaDB 10.6 → 10.11 Migration
otp-email-template-preview	OTP 이메일 템플릿 미리보기	OTP Email Template Preview
passcode-reset-flow-verification	Runbook: Passcode 재설정 플로우 검증 (request-reset → reset-passcode)	Runbook: Passcode Reset Flow Verification (request-reset → reset-passcode)
prego-docker-image-deploy	prego-docker 이미지 서버 배포 (Compose · Digest · Blue/Green)	prego-docker Image Server Deploy (Compose · Digest · Blue/Green)
prego-docker-image-verify	prego-docker 이미지 검증 Runbook	prego-docker Image Verification Runbook
prego-saas-app-trigger-prego-docker	prego_saas → prego-docker 이미지 재빌드 트리거 설정	prego_saas → prego-docker Image Rebuild Trigger Setup
provisioning-failure	Runbook: 테넌트 생성 실패 (Provisioning Failure)	Runbook: Tenant Provisioning Failure

이미 영어인 타이틀 (표시만 확인, 변경 없음): Runbook(index), Email Not Received Troubleshooting (Resend), GitHub Secrets & Environment (PREGO v4.0), PREGO v4.0 Operations Runbook Summary, 기타 영문 전용 문서.

2.2 페이지 본문 구조 (현행)

대부분의 Runbook 문서는 한국어 본문 단일 블록으로 작성되어 있음.
docs-consolidation-and-bilingual-plan에서 정의한 “상단 영어, 하단 한국어” 구조가 Runbook에는 아직 전면 적용되지 않은 상태.

2.3 Mermaid 사용 현황

astro-mermaid 통합으로 Mermaid 블록은 이미 빌드에서 지원됨.
planning 문서 일부(예: IMPLEMENTATION_INDEX, tenant-onboarding-flow, provision-tenant-pipeline 등)에만 Mermaid가 있고, Runbook 다수 문서에는 플로우/절차 다이어그램이 없음.

2.4 컨텐츠 영역 구분선 (Division Line)

현상: 가운데 메인 컨텐츠 영역에서 페이지 타이틀 위에 얇은 연한 회색 수평선(division line)이 노출됨.
관련 코드: src/styles/custom.css에서 이미 다음을 적용 중:
- .sl-markdown-content 내 첫 번째 h1, header 숨김
- 첫 번째 h1 바로 다음 hr 및 hr:first-child, hr:nth-child(2) 숨김
- .content-panel + .content-panel 상단 border 제거
추정: Starlight 기본 레이아웃 또는 다른 컴포넌트에서 생성하는 구분선이 남아 있을 수 있음. 해당 요소를 찾아 제거할 대상으로 정의 필요.

3. 요구사항 상세 (Requirements)

3.1 Runbook 타이틀 영문화

대상: src/content/docs/runbook/**/*.md의 frontmatter title.
규칙: 사이드바에 표시되는 문자열에서 한국어 구절을 위 표의 “제안 영어 title”에 맞게 치환. 고유명사(예: DiRT, R2, GTape, prego-docker)는 유지.
산출물: 각 Runbook 문서의 title이 영문만 포함하거나, 괄호 안 보조 설명만 한글 허용(선택 정책).

3.2 페이지 구조: 상단 영어, 하단 한국어

구조 (각 Runbook 페이지 본문):
1. 상단: 영어 제목(예: ## English) + 영어 본문 전체 (단계, 표, 주의사항 등).
2. 구분: 명확한 구분선 또는 섹션 제목 (예: --- + ## 한국어).
3. 하단: 한국어 제목 + 기존 한국어 본문 유지.
선택 사항:
- “English” / “한국어” 섹션에 id를 부여해 앵커 링크 가능하게 할지 여부.
- 이미 영문만 있는 Runbook(예: OPERATIONS.md, email-troubleshooting)은 하단 한국어 섹션을 “(한국어 번역 추후 추가)” 등으로 비워 둘지, 또는 구조만 맞추고 본문은 그대로 둘지 정책 결정.
산출물: 모든 Runbook 마크다운 본문이 “영어 블록 → 한국어 블록” 순서를 따르도록 편집.

3.3 Mermaid 플로우 다이어그램 추가

대상: 절차·순서·상태 전이·배포 흐름이 있는 Runbook 문서. 예:
- provision-tenant-pipeline, tenant-onboarding-flow
- ansible-clean-and-reinstall, prego-docker-image-deploy
- passcode-reset-flow-verification, provisioning-failure
- logpush-setup, mariadb-backup-r2, dirt-restore-verify
- 기타 “단계별 점검”, “트리거 설정” 등 절차형 문서
형식: Mermaid flowchart / flowchart LR|TB 또는 sequenceDiagram 등으로 단계·역할·분기 표현.
위치: 해당 절차를 설명하는 문단 바로 위 또는 아래에 mermaid … 블록 추가.
산출물: 문서별로 “필수 플로우” 1개 이상 식별 후, Mermaid 스크립트 추가. 기존 텍스트와 중복되지 않도록 요약 수준으로 작성.

3.4 컨텐츠 영역 타이틀 상단 구분선 제거

요구: 메인 컨텐츠 영역에서 타이틀 위에 보이는 division line(얇은 회색 수평선)을 제거.
방법:
1. 조사: Starlight/현재 레이아웃에서 해당 선이 어떤 요소(hr, border-top, ::before 등)로 그려지는지 확인.
2. 수정: src/styles/custom.css 또는 해당 컴포넌트에서 해당 요소를 display: none 또는 border: none 등으로 비표시 처리.
3. 검증: 모든 테마(light/dark)와 Runbook·Planning·Deployment 페이지에서 타이틀 위 구분선이 보이지 않음을 확인.
산출물: CSS(또는 레이아웃) 변경 1회, 빌드 및 시각 확인 완료.

4. 구현 단계 (Implementation Phases)

Phase 1: 타이틀 영문화 및 구분선 제거 (선행)

순서	작업	담당 산출물
1.1	Runbook 각 `.md`의 frontmatter `title`을 §2.1 표 기준으로 영문으로 변경	`runbook/*/.md`
1.2	컨텐츠 영역 타이틀 상단 division line 유발 요소 조사 및 제거	`custom.css` 또는 레이아웃 컴포넌트
1.3	`pnpm build` 및 브라우저에서 Runbook 메뉴·본문 상단 확인	—

Phase 2: 페이지 이중언어 구조

순서	작업	담당 산출물
2.1	Runbook 문서별로 “상단 영어 본문 / 하단 한국어 본문” 템플릿 적용 규칙 확정	기획 보완 또는 별도 스타일 가이드
2.2	이미 영문인 Runbook은 영어 섹션만 두고, 한국어 섹션은 “(한국어 번역 추후)” 등 플레이스홀더 또는 생략 정책 확정	—
2.3	한국어 단일 본문 문서에 대해 영어 번역 블록 작성 및 상단 배치, 기존 본문은 하단 “한국어” 섹션으로 이동	`runbook/*/.md`
2.4	내부 링크(앵커, 다른 runbook/planning 링크)가 영어/한국어 섹션 모두에서 유효한지 점검	—

Phase 3: Mermaid 다이어그램

순서	작업	담당 산출물
3.1	플로우/절차가 있는 Runbook 문서 목록 확정 및 문서별 다이어그램 1개 이상 지정	목록(체크리스트)
3.2	문서별로 Mermaid flowchart(또는 sequenceDiagram) 스크립트 작성 및 해당 절차 문단 근처에 삽입	`runbook/*/.md`
3.3	`pnpm build`로 Mermaid 렌더링 및 표시 확인	—

5. 산출물 및 검수 기준 (Deliverables and Acceptance)

#	산출물	검수 기준
1	Runbook 사이드바 타이틀	모든 Runbook 메뉴 항목이 영어로만 표시(또는 정책에 따른 예외만 한글)
2	Runbook 페이지 본문	각 페이지 상단에 영어 섹션, 하단에 한국어 섹션 존재
3	Mermaid	플로우가 필요한 Runbook 문서에 최소 1개 이상의 Mermaid 블록 추가, 빌드 시 정상 렌더링
4	Division line	메인 컨텐츠 영역에서 타이틀 위의 회색 수평 구분선 미노출

6. 참조 (References)

PREGO Documentation Consolidation and Bilingual Structure Plan — 이중언어 구조·정리 원칙
Starlight Content authoring — frontmatter, 마크다운
현재 구분선 관련 스타일: docs/src/styles/custom.css (§ “Hide page title and divider”, “content-panel”)
Runbook 디렉터리: docs/src/content/docs/runbook/

본 기획서는 구현 전 계획만 기술하며, 실제 코드/콘텐츠 수정은 별도 작업에서 수행한다.

English {#english}

Runbook English Titles, Bilingual Pages, Mermaid Diagrams, and Content Area Divider Removal Plan

1. Overview

1.1 Purpose

1.2 Scope

2. Current State

2.1 Runbook Sidebar Titles (List Including Korean)

2.2 Page Body Structure (Current)

2.3 Mermaid Usage

2.4 Content Area Division Line

3. Requirements Detail

3.1 Runbook Title English-Only

3.2 Page Structure: Top English, Bottom Korean

3.3 Adding Mermaid Flow Diagrams

3.4 Content Area Title Divider Removal

4. Implementation Phases

Phase 1: Title English-Only and Divider Removal (First)

Phase 2: Page Bilingual Structure

Phase 3: Mermaid Diagrams

5. Deliverables and Acceptance

6. References

한국어 {#korean}

Runbook English Titles, Bilingual Pages, Mermaid Diagrams, and Content Area Divider Removal Plan

1. 개요 (Overview)

1.1 목적 (Purpose)

1.2 범위 (Scope)

2. 현행 분석 (Current State)

2.1 Runbook 사이드바 타이틀 (한국어 포함 목록)

2.2 페이지 본문 구조 (현행)

2.3 Mermaid 사용 현황

2.4 컨텐츠 영역 구분선 (Division Line)

3. 요구사항 상세 (Requirements)

3.1 Runbook 타이틀 영문화

3.2 페이지 구조: 상단 영어, 하단 한국어

3.3 Mermaid 플로우 다이어그램 추가

3.4 컨텐츠 영역 타이틀 상단 구분선 제거

4. 구현 단계 (Implementation Phases)

Phase 1: 타이틀 영문화 및 구분선 제거 (선행)

Phase 2: 페이지 이중언어 구조

Phase 3: Mermaid 다이어그램

5. 산출물 및 검수 기준 (Deliverables and Acceptance)

6. 참조 (References)