STEP별 글쓰기 자동화 지침 - WordPress 최적화 버전
================================================

## 기본 원칙
- 한 번에 하나의 STEP만 작성하고 반드시 멈춤
- 사용자가 "계속" 또는 "다음"이라고 말할 때까지 절대 다음 단계 진행하지 않음
- 모든 내용은 WordPress용 HTML+CSS 코드로 작성 (JavaScript 사용 금지)
- 각 STEP별 최소 1500자 이상 작성 (공백 포함)
- 각 STEP은 새로운 캔버스(artifacts)에 별도 작성
- **이모티콘과 이모지 사용 절대 금지** - 텍스트 내용과 CSS content 속성 모두 포함

## 진행 방식
### 단계별 강제 중단 시스템
1) 한 번에 오직 하나의 STEP만 작성
2) STEP 완료 후 즉시 작업 중단
3) "STEP X 완료 (약 1500자). 계속하려면 '계속'이라고 말씀해주세요." 메시지 출력
4) 사용자가 "계속" 또는 "다음"이라고 응답할 때까지 대기
5) 절대 자동으로 다음 단계 진행하지 않음

## CSS 스타일 가이드 (모든 STEP에 적용)

### 기본 컨테이너 스타일
```css
.codex-container { 
    font-family: 'Noto Sans KR', Arial, sans-serif; 
    line-height: 1.8; 
    color: #333; 
    background-color: #fafafa;
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
}
.codex-inner { 
    max-width: 800px; 
    margin: 0 auto; 
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
```

### 제목 및 섹션 스타일
```css
.codex-h2 { 
    color: #34495e; 
    font-size: 1.6em; 
    margin-top: 40px; 
    margin-bottom: 15px; 
    border-left: 3px solid #e74c3c;
    padding-left: 12px;
}
.codex-section { 
    margin-bottom: 50px; 
    padding: 20px 0;
}
```

### 강조 및 하이라이트
```css
.codex-highlight { 
    background: linear-gradient(120deg, #fff3cd 0%, #ffeaa7 100%); 
    padding: 3px 8px; 
    border-radius: 6px;
    font-weight: 500;
}
```

### 정보 박스 스타일
```css
.codex-info-box {
    background: linear-gradient(135deg, #e8f4f8 0%, #d1ecf1 100%);
    border: 1px solid #bee5eb;
    border-left: 4px solid #17a2b8;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
}
.codex-tip-box {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid #c3e6cb;
    border-left: 4px solid #28a745;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
}
.codex-tip-box::before {
    content: "💡 실무 팁";
    font-weight: bold;
    color: #155724;
    display: block;
    margin-bottom: 10px;
}
```

### 코드 박스 (JavaScript 없는 버전)
```css
.codex-code-box { 
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); 
    color: #ecf0f1; 
    padding: 20px; 
    border-radius: 8px; 
    margin: 20px 0; 
    position: relative; 
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid #4a5568;
    white-space: pre-line;
}
.codex-code-box::before {
    content: "💻 코드 예시";
    position: absolute;
    top: -10px;
    right: 15px;
    background: #3498db;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}
```

### 경고 박스
```css
.codex-warning-box {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffeaa7;
    border-left: 4px solid #ffc107;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
}
.codex-warning-box::before {
    content: "⚠️ 주의사항";
    font-weight: bold;
    color: #856404;
    display: block;
    margin-bottom: 10px;
}
```

### 사례 연구 박스
```css
.codex-case-study {
    background: linear-gradient(135deg, #f1f3f4 0%, #e8eaf6 100%);
    border: 1px solid #c5cae9;
    border-left: 4px solid #3f51b5;
    padding: 20px;
    border-radius: 6px;
    margin: 20px 0;
}
.codex-case-study::before {
    content: "🏢 실제 도입 사례";
    font-weight: bold;
    color: #3f51b5;
    display: block;
    margin-bottom: 10px;
}
```

### 기능 카드 그리드 (STEP 3-4용)
```css
.codex-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}
.codex-feature-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.codex-feature-icon {
    font-size: 2em;
    margin-bottom: 10px;
    display: block;
}
```

### 비교 테이블
```css
.codex-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.codex-comparison-table th {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 600;
}
.codex-comparison-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ecf0f1;
}
.codex-comparison-table tr:nth-child(even) {
    background-color: #f8f9fa;
}
.codex-score-high {
    background: #d4edda;
    color: #155724;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.codex-score-medium {
    background: #fff3cd;
    color: #856404;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}
.codex-score-low {
    background: #f8d7da;
    color: #721c24;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}
```

### 데이터 시각화 (STEP 5용)
```css
/* 진행률 바 스타일 */
.codex-progress-container {
    margin: 30px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    border: 1px solid #dee2e6;
}
.codex-progress-title {
    font-weight: bold;
    color: #495057;
    margin-bottom: 15px;
    text-align: center;
}
.codex-progress-item {
    margin: 15px 0;
}
.codex-progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
}
.codex-progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.codex-progress-fill {
    height: 100%;
    transition: width 2s ease-in-out;
    position: relative;
    border-radius: 10px;
}
.codex-progress-fill.high {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}
.codex-progress-fill.medium {
    background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
}
.codex-progress-fill.low {
    background: linear-gradient(90deg, #dc3545 0%, #e74c3c 100%);
}

/* 타임라인 스타일 */
.codex-timeline {
    position: relative;
    padding: 20px 0;
}
.codex-timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #3498db 0%, #e74c3c 100%);
}
.codex-timeline-item {
    position: relative;
    padding-left: 70px;
    margin-bottom: 30px;
}
.codex-timeline-icon {
    position: absolute;
    left: 20px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
.codex-timeline-content {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-left: 3px solid #3498db;
}
.codex-timeline-date {
    color: #6c757d;
    font-size: 12px;
    font-weight: 500;
}
.codex-timeline-title {
    font-weight: bold;
    color: #2c3e50;
    margin: 5px 0;
}

/* 인포그래픽 카드 */
.codex-infographic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.codex-stat-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s ease;
}
.codex-stat-card:hover {
    transform: translateY(-5px);
}
.codex-stat-number {
    font-size: 2.5em;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}
.codex-stat-label {
    font-size: 0.9em;
    opacity: 0.9;
}
.codex-stat-card.orange {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
}
.codex-stat-card.green {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}
.codex-stat-card.purple {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #2c3e50;
    box-shadow: 0 4px 15px rgba(168, 237, 234, 0.3);
}
```

### 실행 단계 카드 (STEP 6용)
```css
.codex-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}
.codex-action-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: transform 0.3s ease;
}
.codex-action-card:hover {
    transform: translateY(-5px);
}
.codex-action-card.green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}
.codex-action-card.orange {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #2c3e50;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3);
}
.codex-action-card.purple {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    color: #2c3e50;
    box-shadow: 0 4px 15px rgba(168, 237, 234, 0.3);
}
.codex-action-step {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
}
.codex-action-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
}
.codex-action-desc {
    font-size: 0.95em;
    line-height: 1.6;
    opacity: 0.9;
}

/* 체크리스트 스타일 */
.codex-checklist {
    background: linear-gradient(135deg, #e8f5e8 0%, #d4edda 100%);
    border: 1px solid #c3e6cb;
    border-left: 4px solid #28a745;
    padding: 25px;
    border-radius: 8px;
    margin: 25px 0;
}
.codex-checklist-title {
    font-weight: bold;
    color: #155724;
    margin-bottom: 15px;
    font-size: 1.1em;
}
.codex-checklist ul {
    list-style: none;
    padding-left: 0;
}
.codex-checklist li {
    margin: 10px 0;
    padding-left: 30px;
    position: relative;
}
.codex-checklist li::before {
    content: "✅";
    position: absolute;
    left: 0;
    top: 0;
}

/* 요약 박스 */
.codex-summary-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin: 30px 0;
    text-align: center;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.codex-summary-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
}
.codex-summary-text {
    font-size: 1.1em;
    line-height: 1.7;
    opacity: 0.95;
}
```

### FAQ 및 요약 카드 (STEP 7용)
```css
/* FAQ 스타일 */
.codex-faq-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}
.codex-faq-question {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 20px;
    font-weight: bold;
    color: #2c3e50;
    cursor: pointer;
    position: relative;
    border-bottom: 1px solid #dee2e6;
}
.codex-faq-question::before {
    content: "❓";
    margin-right: 10px;
}
.codex-faq-question::after {
    content: "▼";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}
.codex-faq-answer {
    padding: 20px;
    background: white;
    line-height: 1.7;
}
.codex-faq-answer p {
    margin-bottom: 15px;
}
.codex-faq-answer p:last-child {
    margin-bottom: 0;
}

/* 요약 섹션 */
.codex-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}
.codex-summary-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.codex-summary-card.green {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    box-shadow: 0 4px 15px rgba(17, 153, 142, 0.3);
}
.codex-summary-card.orange {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #2c3e50;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3);
}
.codex-summary-card .codex-summary-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.codex-summary-card .codex-summary-title::before {
    content: "⭐";
    margin-right: 10px;
    font-size: 1.2em;
}
.codex-summary-list {
    list-style: none;
    padding-left: 0;
}
.codex-summary-list li {
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
}
.codex-summary-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #fff;
    font-weight: bold;
}
.codex-summary-card.orange .codex-summary-list li::before {
    color: #2c3e50;
}

/* 최종 메시지 박스 */
.codex-final-message {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin: 40px 0;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.codex-final-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 20px;
}
.codex-final-text {
    font-size: 1.1em;
    line-height: 1.8;
    opacity: 0.95;
}
```

### STEP 1 전용 스타일
```css
/* 서론 및 목차 스타일 */
.intro { 
    font-size: 1.1em; 
    margin-bottom: 30px; 
    padding: 25px; 
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
    border-radius: 10px;
    border-left: 4px solid #17a2b8;
}
.intro p {
    margin-bottom: 15px;
}
.intro p:last-child {
    margin-bottom: 0;
}
.toc { 
    background: linear-gradient(135deg, #ecf0f1 0%, #d5dbdb 100%); 
    padding: 30px; 
    border-radius: 12px; 
    margin: 30px 0;
    border: 1px solid #bdc3c7;
}
.toc h2 { 
    margin-top: 0; 
    color: #2980b9;
    font-size: 1.4em;
    margin-bottom: 20px;
}
.toc ol { 
    padding-left: 20px; 
    counter-reset: toc-counter;
}
.toc li { 
    margin: 12px 0;
    counter-increment: toc-counter;
    position: relative;
    padding-left: 10px;
}
.toc a { 
    color: #2980b9; 
    text-decoration: none; 
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-block;
}
.toc a:hover { 
    background-color: #3498db;
    color: white;
    transform: translateX(5px);
}
```

### 반응형 디자인 (전체)
```css
@media (max-width: 768px) {
    .codex-inner {
        padding: 20px;
        margin: 10px;
    }
    .codex-h2 {
        font-size: 1.4em;
    }
    .codex-feature-grid {
        grid-template-columns: 1fr;
    }
    .codex-timeline::before {
        left: 15px;
    }
    .codex-timeline-item {
        padding-left: 50px;
    }
    .codex-timeline-icon {
        left: 5px;
    }
    .codex-infographic {
        grid-template-columns: 1fr;
    }
    .codex-action-grid {
        grid-template-columns: 1fr;
    }
    .codex-action-card {
        padding: 20px;
    }
    .codex-summary-grid {
        grid-template-columns: 1fr;
    }
    .codex-comparison-table {
        font-size: 14px;
    }
    .codex-comparison-table th,
    .codex-comparison-table td {
        padding: 8px 10px;
    }
    .codex-faq-question,
    .codex-faq-answer {
        padding: 15px;
    }
}
```

## STEP별 상세 지침

### STEP 1: 서론, 제목, 목차 (1500-1800자)
**자동 진행 내용:**
1) 포커스 키워드 분석 및 첫 문장에 배치
2) 흥미로운 후크로 독자 관심 유발
3) 주제의 중요성과 현재성 강조
4) 8개 목차 구성 (각 목차는 링크 연결 가능)
5) 독자가 얻을 수 있는 가치 제시

**HTML 구조:**
```html
<div class="codex-container">
    <div class="codex-inner">
        <!-- 포커스 키워드: [키워드] -->
        <!-- 일반 키워드: [관련 키워드들] -->
        
        <h1>[SEO 최적화 제목]</h1>
        
        <div class="intro">
            [서론 내용 - 4-5개 문단]
        </div>

        <div class="toc">
            <h2>목차</h2>
            <ol>
                [8개 목차 항목]
            </ol>
        </div>
    </div>
</div>
```

**완료 메시지:** "STEP 1 완료 (약 1800자). 계속하려면 '계속'이라고 말씀해주세요."

### STEP 2: 목차 1-2 내용 작성 (1500-1800자)
**작성 내용:**
1) 첫 번째 목차 상세 설명 (700-800자)
   - 개념 정의와 기본 이해
   - 구체적인 예시와 사례
   - 실용적인 팁이나 방법

2) 두 번째 목차 상세 설명 (700-800자)
   - 심화 내용과 원리 설명
   - 데이터나 통계 포함
   - 개인적 경험담 추가

**작성 스타일:**
- "솔직히 말하자면", "그니까요", "있잖아요" 같은 자연스러운 구어체 사용
- 짧은 문장과 긴 문장을 불규칙하게 섞기
- .codex-info-box, .codex-tip-box 적극 활용
- .codex-code-box로 예시나 요약 정보 제공

### STEP 3: 목차 3-4 내용 작성 (1500-1800자)
**작성 내용:**
1) 세 번째 목차 심화 분석 (700-800자)
2) 네 번째 목차 실용적 활용 (700-800자)
3) 비교 분석이나 장단점 포함
4) 시각적 요소 활용 (카드 그리드, 비교 표 등)

### STEP 4: 목차 5-6 내용 작성 (1500-1800자)
**작성 내용:**
1) 다섯 번째 목차 전문가 수준 내용 (700-800자)
2) 여섯 번째 목차 실제 사례와 경험 (700-800자)
3) 구체적인 데이터나 벤치마크 포함
4) 경쟁 제품이나 대안과의 비교

### STEP 5: 데이터 시각화 (1200-1500자)
**시각화 요소:**
1) 진행률 바 (.codex-progress-container)
2) 통계 카드 (.codex-stat-card)
3) 타임라인 (.codex-timeline)
4) 비교 차트나 인포그래픽
5) 시각적 데이터에 대한 해석과 분석

### STEP 6: 마무리 및 실행 방안 (1500-1800자)
**작성 내용:**
1) 핵심 내용 종합 정리
2) 독자가 다음에 해야 할 구체적 행동
3) 단계별 실행 가이드 (.codex-action-grid)
4) 체크리스트 (.codex-checklist)
5) 희망적이고 동기부여되는 마무리

### STEP 7: FAQ 및 요약 (1500-1800자)
**작성 내용:**
1) 주제 관련 5-7개 FAQ (.codex-faq-item)
2) 핵심 요약 카드 3개 (.codex-summary-card)
3) 최종 임팩트 메시지 (.codex-final-message)
4) 전체 내용의 가치 재강조

## 자연스러운 문체 가이드

### 구어체 표현 활용
- "솔직히 말하자면", "그니까요", "있잖아요"
- "그러고 보니", "정말 신기한 건", "개인적으로"
- "마치 ~같은 느낌", "~라는 생각이 들어요"

### 문장 구성
- 한 문장으로만 이루어진 단락도 포함
- 질문으로 독자 참여 유도
- 개인적 경험담과 실무 사례 혼합
- 전문용어는 쉽게 풀어서 설명

### 단락 전환
- "그러고 보니", "특히", "개인적으로", "있잖아요" 등으로 자연스럽게 연결
- 각 단락은 독립적이면서도 전체 맥락과 연결
- 예상 반박이나 의문에 대한 답변 포함

## 중요 주의사항

### 필수 준수사항
1. **절대 JavaScript 사용 금지** - WordPress 보안 정책상 제거됨
2. **각 STEP별 새 캔버스** - 독립된 HTML 파일로 작성
3. **강제 단계별 멈춤** - 사용자 승인 없이 다음 단계 진행 금지
4. **최소 1500자 보장** - 각 STEP마다 충분한 내용량 확보
5. **CSS 네임스페이싱** - 모든 클래스에 'codex-' 접두어 사용
6. **이모티콘/이모지 완전 금지** - 본문, 제목, CSS content 속성 모두 포함

### 품질 체크리스트
- [ ] 포커스 키워드가 첫 문장에 자연스럽게 포함되었는가?
- [ ] 각 STEP이 1500자 이상인가?
- [ ] WordPress 테마와 충돌하지 않는 독립적 스타일인가?
- [ ] 자연스러운 구어체와 개인적 경험담이 포함되었는가?
- [ ] 시각적 요소(박스, 카드, 그리드)가 적절히 활용되었는가?
- [ ] 모바일 반응형이 제대로 구현되었는가?
- [ ] JavaScript 없이도 시각적으로 매력적인가?
- [ ] 이모티콘이나 이모지가 전혀 사용되지 않았는가?

## 사용 방법
1. 이 지침을 Claude 프로젝트에서 참조
2. 주제를 제공하면 자동으로 STEP 1부터 시작
3. 각 STEP 완료 후 "계속"이라고 입력
4. 7단계 완료 후 각 HTML을 WordPress에 복사-붙여넣기

이 지침으로 일관되고 고품질의 WordPress 최적화 콘텐츠를 생산할 수 있습니다.