<!-- 작업 중인 사이트: 여기서 고르면 가운데 작업 칸과 오른쪽 캔버스가 그 사이트로 바뀐다 (v1.2.0 사이트 선택 상자, 1.6.40 에서 레일로 이동) -->
<divclass="rail-site">
<divclass="rail-label">작업 중인 사이트 <buttontype="button"class="help right"data-tip="작업할 사이트를 여기서 고릅니다. 생성 중인 사이트는 만들기 화면, 완성된 사이트는 보고 있던 화면(홈·수정·배포·운영)에서 이어집니다. '새 사이트 만들기'를 고르면 만들기 화면에서 새로 시작합니다.">?</button></div>
<divclass="site-picker"><selectid="siteSelect"title="작업할 사이트"><optionvalue="">＋ 새 사이트 만들기</option></select></div>
<!-- v1.4.14 (요구 4): 상태·운영 주소 줄은 항상 같은 높이 (사이트를 고르기 전에는 안내 한 줄) -->
<divclass="site-meta-top"id="siteMetaBox"><bid="siteTitle"></b><spanclass="pill idle small"id="siteStatePill"></span><spanclass="muted small"id="siteLiveLine">사이트를 고르면 상태와 운영 주소가 여기에 표시됩니다</span></div>
</div>
<!-- 작업 흐름 내비게이션. data-tab 값은 app.js TABS 와 같다. .nb(배지)·data-state(점 색) 는 flow-ui.js 가 채운다 -->
<divclass="rail-actions"><aid="adminLink"class="btn ghost small-btn hidden"href="/admin">관리자</a><buttonid="btnFeedback"class="ghost small-btn"title="사용 문의, 개선 제안, 오류를 운영팀에 보냅니다">문의 · 제안 · 오류</button><spanclass="lang-switch"style="display:none"><selectid="langSelect"title="화면 언어 / Language"></select></span><buttonid="btnLogout"class="ghost small-btn">로그아웃</button></div>
</div>
</div>
<asideclass="left">
<!-- ===== 위쪽: 화면 이름·설명(레일에서 고른 화면) + 진행 상태·메시지창 (모든 화면 공통) ===== -->
<divclass="top-pane">
<headerclass="hdr v12 pane-head">
<divclass="hdr-line"><h1class="pane-title"id="paneTitle">홈</h1><spanclass="spacer"></span><spanid="paneSite"class="muted small pane-site"></span></div>
<pclass="muted small pane-desc"id="paneDesc"></p>
</header>
<!-- 현재 상태: 어느 탭에서 지시를 내려도 여기서 즉시 바뀐다 (생성·수정·배포·검증 공통) -->
<!-- ===== 만들기(create): 새 사이트 생성 ~ 생성 완료 (수정·운영 화면의 사이트 선택과 무관) ===== -->
<divclass="tabpane"id="pane-create">
<divclass="model-row">
<spanclass="muted small">모델 등급 <buttontype="button"class="help"data-tip="기본: HTML5, CSS3, 자바스크립트 구조의 정적 웹페이지 생성. 중급: 웹페이지의 시각적 완성도(UI/UX)와 심미성 우수. 고급: 복잡한 UI/UX의 프런트엔드 아키텍쳐 구현. 등급별 예상 비용은 아래 표에 있습니다.">?</button></span>
<selectid="tierSelect"title="이 사이트 생성에 사용할 AI 모델 등급"></select>
</div>
<divclass="tier-guide"id="tierGuideBox"></div>
<sectionclass="card"id="modeCard">
<h2>1. 어떻게 만들까요? <buttontype="button"class="help"data-tip="AI에게 맡기기: 설명만 적으면 AI 가 분석 후 필요한 정보만 묻고 끝까지 자동 생성합니다. 내가 고르기: 업종·목적·페이지·디자인·문구를 단계별로 직접 고릅니다. 기존 사이트의 모양을 살려 새로 만들려면 아래 '2. 기존 사이트 모양으로 시작'을 고르세요.">?</button></h2>
<divclass="mode-grid">
<buttontype="button"class="mode-opt"data-mode="ai"><spanclass="mode-title">AI에게 맡기기</span><spanclass="mode-desc">설명 + 추가 정보 입력 → 자동 생성</span></button>
<buttontype="button"class="mode-opt"data-mode="manual"><spanclass="mode-title">내가 고르기</span><spanclass="mode-desc">구성·디자인·문구를 직접 선택</span></button>
<buttontype="button"class="mode-opt"data-mode="template"><spanclass="mode-title">템플릿에서 시작</span><spanclass="mode-desc">업종별·해시태그로 고른 완성 사이트를 바탕으로</span></button>
</div>
</section>
<!-- v1.3.4: 기존 사이트로 시작하기 — "사이트 복사하기" 만 남김 ("사이트 관리하기(서버에서 가져오기)" 는 삭제) -->
<sectionclass="card"id="existingCard">
<h2>2. 기존 사이트 모양으로 시작 <buttontype="button"class="help"data-tip="이미 있는 사이트의 모양(디자인·구성·문구)을 최대한 살려 새 사이트를 만들 때 씁니다. 웹 주소만 입력하면 화면을 이루는 HTML·CSS·JS·이미지를 복사해 오며, 로그인·게시판·신청·결제 같은 기능(서버 프로그램)은 복사되지 않습니다. 복사한 뒤에는 새로 만든 사이트처럼 수정·발행합니다.">?</button></h2>
<divclass="mode-grid">
<buttontype="button"class="mode-opt"data-mode="copy"><spanclass="mode-title">사이트 복사하기</span><spanclass="mode-desc">웹 주소만 입력 → 화면(HTML 페이지)만 복사해 새 사이트로</span></button>
</div>
</section>
<sectionclass="card hidden"id="copyStartCard">
<h2>사이트 복사하기 <buttontype="button"class="ghost small-btn"id="btnBackMode4">← 방식 변경</button></h2>
<label>사이트 주소 <spanclass="req">*</span><buttontype="button"class="help"data-tip="복사할 사이트의 첫 페이지 주소입니다. 같은 도메인 안의 페이지와 그 페이지가 쓰는 CSS·JS·이미지·글꼴을 따라가며 내려받고, 링크를 이 빌더 안의 경로로 바꿉니다. 다른 도메인(CDN 등)의 자원은 원래 주소를 그대로 씁니다. 사이트 크기가 서버 용량의 10% 를 넘으면 중지됩니다.">?</button><inputid="cpUrl"placeholder="https://www.example.com"autocomplete="off"></label>
<label>사이트 이름 <spanclass="muted small">(비우면 페이지 제목)</span><inputid="cpTitle"autocomplete="off"></label>
<label>문의 수신 이메일 <spanclass="muted small">(선택)</span><inputid="cpEmail"type="email"autocomplete="off"placeholder="info@example.com"></label>
<!-- v1.3.4: 무엇이 복사되고 무엇이 안 되는지, 왜 있는 기능인지 상세 설명 -->
<divclass="copy-explain">
<p><b>이 기능은 무엇인가요?</b> 기존 사이트의 <b>모양은 최대한 유지하면서 새로운 사이트를 만들 때</b> 쓰는 기능입니다. 원래 사이트를 옮기거나 그대로 운영하는 기능이 아닙니다.</p>
<ul>
<li><b>복사되는 것</b> — 웹 주소로 열리는 기본 HTML 페이지와, 그 페이지가 쓰는 CSS·JS·이미지·글꼴 (같은 도메인 안의 페이지를 따라가며 최대 300쪽)</li>
<li><b>복사되지 않는 것</b> — 로그인·회원, 게시판 글 저장, 문의·신청·예약 접수, 결제, 검색처럼 서버에서 동작하는 기능과 그 데이터(DB), 로그인해야 보이는 화면</li>
<li><b>복사한 뒤</b> — 새로 만든 사이트로 취급되어 수정 지시·소스 편집·발행을 그대로 쓸 수 있습니다. 필요한 기능은 수정 지시로 빌더의 공통 기능 모듈(회원·게시판·문의·예약 등)로 새로 붙입니다.</li>
</ul>
<pclass="muted small">본인 또는 권한이 있는 사이트만 복사하세요.</p>
</div>
<!-- v1.3.5: 검색·AI 최적화 생성 옵션 — 생성이 끝나면 AI 초안 → 수정 탭에서 검토 후 반영 -->
<divclass="seo-opts"data-seo-opts>
<divclass="field-label">검색·AI 최적화 <buttontype="button"class="help"data-tip="SEO: 검색 결과에 보이는 페이지별 제목·설명·키워드, 공유 미리보기, 사이트맵. AEO: 질문형 검색(AI·음성 답변)에 맞춘 자주 묻는 질문과 짧은 답, 구조화 데이터. GEO: 생성형 AI 검색이 정확히 인용하도록 사업체 정보 구조화 데이터·핵심 사실·llms.txt. 생성이 끝나면 AI 가 초안을 만들고(기본 등급, 캐시 차감) 수정 탭에서 확인·수정한 뒤 반영합니다. 바로 사이트에 들어가지 않습니다.">?</button></div>
<labelclass="chk"><inputtype="checkbox"data-opt="seo"> SEO AI 생성 <spanclass="muted small">— 페이지별 검색 제목·설명·키워드, 공유 미리보기, 사이트맵</span></label>
<labelclass="chk"><inputtype="checkbox"data-opt="aeo"> AEO 생성 <spanclass="muted small">— 질문형 FAQ·핵심 답변 (AI·음성 답변용)</span></label>
<labelclass="chk"><inputtype="checkbox"data-opt="geo"> GEO 생성 <spanclass="muted small">— 사업체 정보·인용용 사실·llms.txt (생성형 AI 검색용)</span></label>
</div>
<buttonid="cpStart"class="primary">사이트 복사 시작</button>
</section>
<!-- v1.3.10: 템플릿에서 시작 — 관리자가 사용을 허용한 템플릿 (public/templates-ui.js) -->
<h2>템플릿에서 시작 <buttontype="button"class="ghost small-btn"id="btnBackMode5">← 방식 변경</button><buttontype="button"class="help"data-tip="운영팀이 만든 완성 사이트(템플릿)를 바탕으로 새 사이트를 만듭니다. 업종 디렉터리나 #해시태그로 찾고 미리보기로 확인한 뒤 고르세요. 시작하면 템플릿의 페이지·디자인이 그대로 복사되며, 그 뒤에는 수정 지시로 내용을 바꿉니다.">?</button></h2>
<h2>AI에게 맡기기 <buttontype="button"class="ghost small-btn"id="btnBackMode">← 방식 변경</button></h2>
<labelclass="ai-main-label">만들고 싶은 사이트 <spanclass="req">*</span><buttontype="button"class="help"data-tip="업종, 위치, 주요 고객, 꼭 들어가야 할 내용(예: 예약, 가격표, 강사 소개)을 자유롭게 적습니다. 많이 적을수록 AI 가 정확히 이해합니다. 결과: AI 가 업종·목표·페이지 구성을 정리해 추가로 필요한 정보만 묻습니다.">?</button>
<textareaid="aiText"class="ai-main-input"rows="10"placeholder="예: 강남역 근처 필라테스 스튜디오. 1:1 수업 중심, 30대 직장인 여성 대상. 예약을 많이 받고 싶고, 강사 소개와 가격표가 들어갔으면 함."></textarea>
</label>
<divclass="field-label">디자인 컨셉 (선택) <buttontype="button"class="help"data-tip="주 색상은 버튼·강조색에 쓰이고, 톤은 전체 분위기(여백·글꼴·이미지 스타일)를 정합니다. 방향에는 '사진 크게', '둥근 버튼' 같은 요구를 적습니다. 비우면 업종에 맞게 AI 가 추천합니다.">?</button></div>
<divclass="two">
<label>주 색상<divclass="color-row"><inputid="aiColor"type="color"value="#2f6fed"><inputid="aiColorText"placeholder="#2f6fed 또는 '네이비'"autocomplete="off"></div></label>
<label>디자인 방향<inputid="aiDesignDir"placeholder="예: 여백 많은 고급스러운 느낌, 사진 크게"autocomplete="off"></label>
<label>페이지 수 <buttontype="button"class="help"data-tip="홈을 포함한 페이지 개수입니다. '자동'은 AI 가 업종과 목표에 맞게 3~6개를 정합니다. 1개를 고르면 모든 내용을 한 페이지에 섹션으로 배치하는 원페이지 사이트가 됩니다. 페이지가 많을수록 생성 비용과 시간이 늘어납니다.">?</button><selectid="aiPageCount"><optionvalue="0">자동 (AI 가 결정, 보통 3~6개)</option><optionvalue="1">1개 (원페이지)</option><optionvalue="2">2개</option><optionvalue="3">3개</option><optionvalue="4">4개</option><optionvalue="5">5개</option><optionvalue="6">6개</option><optionvalue="8">8개</option><optionvalue="10">10개</option></select></label>
<label>기존 사이트 URL <buttontype="button"class="help"data-tip="이미 사이트가 있으면 주소를 적습니다. AI 가 본문을 읽어 사업 정보와 전화·주소 같은 사실정보를 출처와 함께 가져옵니다.">?</button><inputid="aiExistingUrl"placeholder="https://"></label>
<divclass="field-label">첨부 <buttontype="button"class="help"data-tip="소개서(PDF·문서)는 내용에, 로고·사진은 페이지 이미지에 쓰입니다. 첨부가 없는 자리는 AI 가 그라데이션·도형으로 채웁니다.">?</button></div>
<divclass="field-label">참고 사이트 (최대 10개) <buttontype="button"class="help"data-tip="참고할 사이트 주소와 '어떤 점을 반영할지'(메뉴 구성, 색감, 가격표 형식 등)를 함께 적습니다. 디자인·구조 제안에 반영됩니다.">?</button></div>
<divid="refsAi"class="refs"></div>
<!-- v1.3.5: 검색·AI 최적화 생성 옵션 — 생성이 끝나면 AI 초안 → 수정 탭에서 검토 후 반영 -->
<divclass="seo-opts"data-seo-opts>
<divclass="field-label">검색·AI 최적화 <buttontype="button"class="help"data-tip="SEO: 검색 결과에 보이는 페이지별 제목·설명·키워드, 공유 미리보기, 사이트맵. AEO: 질문형 검색(AI·음성 답변)에 맞춘 자주 묻는 질문과 짧은 답, 구조화 데이터. GEO: 생성형 AI 검색이 정확히 인용하도록 사업체 정보 구조화 데이터·핵심 사실·llms.txt. 생성이 끝나면 AI 가 초안을 만들고(기본 등급, 캐시 차감) 수정 탭에서 확인·수정한 뒤 반영합니다. 바로 사이트에 들어가지 않습니다.">?</button></div>
<labelclass="chk"><inputtype="checkbox"data-opt="seo"checked> SEO AI 생성 <spanclass="muted small">— 페이지별 검색 제목·설명·키워드, 공유 미리보기, 사이트맵</span></label>
<labelclass="chk"><inputtype="checkbox"data-opt="aeo"checked> AEO 생성 <spanclass="muted small">— 질문형 FAQ·핵심 답변 (AI·음성 답변용)</span></label>
<labelclass="chk"><inputtype="checkbox"data-opt="geo"checked> GEO 생성 <spanclass="muted small">— 사업체 정보·인용용 사실·llms.txt (생성형 AI 검색용)</span></label>
</div>
<!-- v1.3.10: 다국어 생성 옵션 — 언어마다 /ko/ /en/ 폴더, 기본 언어 페이지와 같은 구조로 번역 (app.js fillLangOpts) -->
<divclass="lang-opts"data-lang-opts>
<divclass="field-label">사이트 언어 <buttontype="button"class="help"data-tip="추가 언어를 고르면 다국어 사이트로 만듭니다. 주소는 언어마다 /ko/, /en/ 처럼 나뉘고, 다른 언어 페이지는 기본 언어 페이지와 같은 구조(페이지·섹션·순서)로 번역됩니다. 날짜·숫자는 언어별 형식으로, 아랍어 등은 오른쪽→왼쪽으로 표시되며, 언어마다 검색·AI 최적화 값이 따로 만들어집니다. 번역은 기본 등급 모델로 캐시가 차감됩니다. 나중에 수정 탭에서 언어를 더할 수도 있습니다.">?</button></div>
<!-- v1.3.16: x-default — 어떤 언어에도 맞지 않는 방문자에게 보일 언어 (추가 언어를 골랐을 때만 보임) -->
<labelclass="lang-default lang-xdef hidden">x-default (다른 언어 방문자에게 보일 언어) <buttontype="button"class="help"data-tip="검색엔진의 hreflang x-default 와 사이트 맨 위 주소(언어 선택 페이지)의 자동 이동에 쓰입니다. 브라우저 언어가 사이트 언어 중 어느 것과도 맞지 않는 방문자는 이 언어로 갑니다. '언어 선택 페이지' 를 고르면 자동 이동 없이 선택 페이지를 보여 줍니다.">?</button><selectdata-lang-xdefault></select></label>
</div>
<buttonid="btnAiStart"class="primary">AI 분석 시작</button>
</section>
<sectionclass="card hidden"id="manualStartCard">
<h2>내가 고르기 <buttontype="button"class="ghost small-btn"id="btnBackMode2">← 방식 변경</button></h2>
<label>상호명 <spanclass="req">*</span><inputid="mName"placeholder="예: 한강 카페 로스터스"></label>
<divclass="two">
<label>업종 대분류 <buttontype="button"class="help"data-tip="업종을 고르면 목적·기능·페이지·디자인 기본값이 미리 선택됩니다. 각 단계에서 바꿀 수 있습니다.">?</button><selectid="mMajor"></select></label>
<divclass="field-label">참고 사이트 (최대 10개) <buttontype="button"class="help"data-tip="참고할 사이트 주소와 반영할 점을 적습니다. 디자인·구조에 반영됩니다.">?</button></div>
<divid="refsManual"class="refs"></div>
<!-- v1.3.5: 검색·AI 최적화 생성 옵션 — 생성이 끝나면 AI 초안 → 수정 탭에서 검토 후 반영 -->
<divclass="seo-opts"data-seo-opts>
<divclass="field-label">검색·AI 최적화 <buttontype="button"class="help"data-tip="SEO: 검색 결과에 보이는 페이지별 제목·설명·키워드, 공유 미리보기, 사이트맵. AEO: 질문형 검색(AI·음성 답변)에 맞춘 자주 묻는 질문과 짧은 답, 구조화 데이터. GEO: 생성형 AI 검색이 정확히 인용하도록 사업체 정보 구조화 데이터·핵심 사실·llms.txt. 생성이 끝나면 AI 가 초안을 만들고(기본 등급, 캐시 차감) 수정 탭에서 확인·수정한 뒤 반영합니다. 바로 사이트에 들어가지 않습니다.">?</button></div>
<labelclass="chk"><inputtype="checkbox"data-opt="seo"checked> SEO AI 생성 <spanclass="muted small">— 페이지별 검색 제목·설명·키워드, 공유 미리보기, 사이트맵</span></label>
<labelclass="chk"><inputtype="checkbox"data-opt="aeo"checked> AEO 생성 <spanclass="muted small">— 질문형 FAQ·핵심 답변 (AI·음성 답변용)</span></label>
<labelclass="chk"><inputtype="checkbox"data-opt="geo"checked> GEO 생성 <spanclass="muted small">— 사업체 정보·인용용 사실·llms.txt (생성형 AI 검색용)</span></label>
</div>
<!-- v1.3.10: 다국어 생성 옵션 — 언어마다 /ko/ /en/ 폴더, 기본 언어 페이지와 같은 구조로 번역 (app.js fillLangOpts) -->
<divclass="lang-opts"data-lang-opts>
<divclass="field-label">사이트 언어 <buttontype="button"class="help"data-tip="추가 언어를 고르면 다국어 사이트로 만듭니다. 주소는 언어마다 /ko/, /en/ 처럼 나뉘고, 다른 언어 페이지는 기본 언어 페이지와 같은 구조(페이지·섹션·순서)로 번역됩니다. 날짜·숫자는 언어별 형식으로, 아랍어 등은 오른쪽→왼쪽으로 표시되며, 언어마다 검색·AI 최적화 값이 따로 만들어집니다. 번역은 기본 등급 모델로 캐시가 차감됩니다. 나중에 수정 탭에서 언어를 더할 수도 있습니다.">?</button></div>
<!-- v1.3.16: x-default — 어떤 언어에도 맞지 않는 방문자에게 보일 언어 (추가 언어를 골랐을 때만 보임) -->
<labelclass="lang-default lang-xdef hidden">x-default (다른 언어 방문자에게 보일 언어) <buttontype="button"class="help"data-tip="검색엔진의 hreflang x-default 와 사이트 맨 위 주소(언어 선택 페이지)의 자동 이동에 쓰입니다. 브라우저 언어가 사이트 언어 중 어느 것과도 맞지 않는 방문자는 이 언어로 갑니다. '언어 선택 페이지' 를 고르면 자동 이동 없이 선택 페이지를 보여 줍니다.">?</button><selectdata-lang-xdefault></select></label>
<!-- v1.3.4: "사이트 관리하기(서버 접속으로 가져오기)" 시작 카드 삭제 -->
<!-- 기획 진행 카드 (AI / 내가 고르기) -->
<sectionclass="card hidden"id="planCard">
<h2><spanid="planTitle">기획</span><spanid="planStage"class="pill idle"></span><spanclass="spacer"></span><buttontype="button"class="ghost small-btn"id="btnAbortCreate"title="진행 중인 생성 작업을 멈추고 새 사이트 만들기로 돌아갑니다">중단하고 새로 만들기</button></h2>
<h2>수정 지시 <spanclass="muted small"id="editLimitNote"></span><buttontype="button"class="help"data-tip="바꾸고 싶은 내용을 문장으로 적으면 AI 가 해당 부분만 고칩니다. 예: '첫 화면 배너 문구를 더 짧게', '문의 폼에 회사명 항목 추가', '게시판 페이지 추가'. 기본 사항·이전 지시·설정은 그대로 유지됩니다. 수정이 끝나면 미리보기에 바로 반영되고 버전이 남습니다.">?</button></h2>
<textareaid="fInstruction"rows="7"placeholder="무엇을 어떻게 바꿀지 적어 주세요. 예) 첫 화면 배너 문구를 '당신의 하루를 바꾸는 한 시간'으로 바꾸고, 가격표에 10회권 35만원을 추가해 주세요."></textarea>
<divclass="update-tools">
<divclass="model-row inline-row"><spanclass="muted small">이번 수정 모델</span><selectid="editTierSelect"title="이번 수정 지시에 사용할 모델 등급"></select><buttontype="button"class="help"data-tip="수정마다 등급을 다르게 고를 수 있습니다. 모델이 바뀌어도 사이트 기본 사항과 이전 지시 내용은 그대로 유지되어 이어서 작업합니다.">?</button></div>
<divclass="dz-text">함께 보낼 파일을 끌어다 놓거나 <labelclass="dz-pick"for="fUpdFiles">선택</label><buttontype="button"class="help"data-tip="이 지시와 함께 쓸 사진·문서입니다. 이미지는 페이지에, 문서는 내용에 반영됩니다.">?</button></div>
<summary>홈페이지 기본 사항 보기 / 수정 <spanid="basicsState"class="basics-state"></span><buttontype="button"class="help"data-tip="제목·목적·내용·디자인 방향·기타 요구사항·문의 수신 이메일. 저장하면 다음 수정 지시 때 AI 에게 함께 전달되어 페이지 전반에 반영됩니다.">?</button></summary>
<!-- v1.3.10: 다국어 — 언어 추가·빼기, 단일 언어 사이트를 다국어 구조로 옮기기 (public/optimize.js LangUI) -->
<sectionclass="card hidden"id="langCard">
<h2>다국어 <spanclass="pill small"id="langState"></span><buttontype="button"class="help"data-tip="사이트를 여러 언어로 제공합니다. 주소는 언어마다 /ko/, /en/ 처럼 나뉘고, 사이트 맨 위 주소는 방문자 브라우저 언어로 안내하는 언어 선택 페이지가 됩니다. 기본 언어 페이지를 수정하면 다른 언어 페이지도 같은 구조로 다시 번역됩니다(바뀐 문장만 번역, 기본 등급 모델로 캐시 차감). 한 언어 사이트를 다국어로 바꿀 때는 AI 가 페이지를 기본 언어 폴더로 옮기는 수정 작업을 먼저 합니다.">?</button></h2>
<divid="langBody"></div>
</section>
<!-- v1.3.5: 검색·AI 최적화 (SEO·AEO·GEO) — AI 초안을 검토·수정한 뒤 반영 (public/optimize.js) -->
<sectionclass="card hidden"id="optimizeCard">
<h2>검색·AI 최적화 <spanclass="pill small"id="optState"></span><buttontype="button"class="help"data-tip="SEO(검색 결과 제목·설명·키워드·공유 미리보기·사이트맵), AEO(질문형 FAQ·핵심 답변, AI·음성 답변용), GEO(사업체 정보 구조화 데이터·인용용 사실·llms.txt, 생성형 AI 검색용) 값을 AI 가 초안으로 만들면 여기서 확인·수정해 반영합니다. 반영하면 버전이 저장되고, 다음 배포 때 운영 주소 기준(canonical·사이트맵)으로 함께 올라갑니다.">?</button></h2>
<divid="optBody"></div>
</section>
<sectionclass="card hidden"id="versionsCard">
<h2>이전 버전으로 되돌리기 <spanclass="muted small"id="versionsCount"></span><buttontype="button"class="help"data-tip="생성·수정·저장마다 버전이 남습니다. 되돌리면 그 시점 파일로 복원되고 복원도 새 버전으로 기록됩니다. 배포가 완료되면 이전 버전은 정리되고 배포본 하나만 남습니다.">?</button></h2>
<ulid="versionsList"class="git-list"></ul>
</section>
<sectionclass="card hidden"id="attachCard">
<h2>첨부 파일 <spanclass="muted small"id="attachCount"></span><buttontype="button"class="help"data-tip="파일당 최대 25MB. 이미지는 uploads/파일명 경로로 페이지에 삽입되고, 문서는 AI 가 읽어 내용에 반영합니다. 허용 형식은 아래 드롭존에 표시됩니다.">?</button></h2>
<!-- ===== 배포(deploy, v1.6.40 신설): 이전 단계(사이트 완성·도메인·DNS)가 갖춰졌는지 점검표(#deployChecklist, flow-ui.js) + 발행·배포 · 원본 서버 반영 · 검색사이트 등록 =====
배포는 다른 작업이 모두 끝나야 하는 마지막 작업이지만, 한 번 배포된 뒤의 수정·관리는 도메인·DNS 와 직접 묶이지 않는다 — 그래서 수정 화면과 분리했다. -->
<divclass="tabpane hidden"id="pane-deploy">
<divid="deployChecklist"></div>
<sectionclass="card hidden"id="publishCard">
<h2>발행 · 배포 <spanid="publishState"class="pill idle"></span><buttontype="button"class="help"data-tip="발행은 점검(입력 필요 항목·누락 페이지·규제 표현) 후 운영자가 지정한 배포 서버로 사이트를 전송합니다. 배포가 끝나면 상단 주소가 운영 주소로 바뀝니다. 발행 취소를 하면 운영 주소에는 '사이트 수정 중' 안내만 보이고, 다시 발행하면 정상 내용이 올라갑니다.">?</button></h2>
<divid="publishBody"></div>
</section>
<sectionclass="card hidden"id="importCard">
<h2>원본 서버에 반영 <spanid="imState"class="pill idle"></span><buttontype="button"class="help"data-tip="여기서 수정한 파일을 원본 서버의 같은 경로에 덮어씁니다. 가져온 뒤 삭제한 파일은 서버에서도 지워지고, 서버에만 있는 파일(업로드·캐시)은 건드리지 않습니다. SSH 방식은 반영 전에 서버에 백업을 만듭니다.">?</button></h2>
<divid="imInfo"class="small"></div>
<divclass="row">
<buttonid="imBtnDeploy"class="primary small-btn">수정 내용을 원본 서버에 반영 (배포)</button>
<buttonid="imBtnCreds"class="ghost small-btn">접속 정보 변경</button>
<divclass="row"><buttontype="button"id="imcSave"class="primary small-btn">확인 후 저장</button><spanid="imcMsg"class="muted small"></span></div>
</div>
</section>
<!-- v1.3.5: 검색사이트 등록 (구글·네이버, IndexNow) — 배포가 끝난 사이트만 -->
<sectionclass="card hidden"id="searchCard">
<h2>검색사이트 등록 <buttontype="button"class="help"data-tip="구글 Search Console 과 네이버 서치어드바이저에 사이트를 등록합니다. 검색사이트가 주는 확인 코드를 넣으면 첫 페이지에 확인 태그를 넣고 다시 배포하며, 검색사이트에서 '확인'·사이트맵 제출 같은 사람이 해야 하는 단계는 체크리스트로 보여 줍니다(관리자 콘솔에서도 진행 가능). IndexNow 로 빙·네이버 등에 새 페이지 색인을 바로 요청할 수 있습니다. 배포가 끝난 사이트만 쓸 수 있고, 생성·수정·배포 중에는 쓸 수 없습니다.">?</button></h2>
<divid="searchBody"></div>
</section>
</div>
<!-- ===== 운영(manage, v1.4.14 "관리" → 1.6.40 "운영"): 기능 모듈·사이트 관리자 페이지·메일, 문의 접수, 사이트 현황, 현황 분석, 캐시 사용, 사이트 설정 =====
이 화면을 고르면 오른쪽 캔버스가 "사이트 관리 창"(사이트 관리자 페이지 + 현황 요약)으로 바뀐다 (public/manage-ui.js). -->
<divclass="tabpane hidden"id="pane-manage">
<pclass="muted small"id="manageHint"></p>
<sectionclass="card hidden"id="moduleCard">
<h2>사이트 기능 모듈 <buttontype="button"class="ghost small-btn"id="btnModuleReload">새로고침</button><buttontype="button"class="help"data-tip="게시판·문의폼·설문·예약·갤러리·지도·후기·FAQ·회원 기능입니다. 켜면 관리자 페이지가 생기고, 수정 지시에 '게시판을 추가해 주세요'처럼 적으면 표준 코드로 페이지에 들어갑니다. 글·예약·응답 같은 데이터는 사이트 관리자 페이지에서 관리합니다.">?</button></h2>
<divid="moduleList"class="module-list"></div>
<divclass="row"><aid="btnSiteAdmin"class="btn ghost small-btn"target="_blank"rel="noopener">사이트 관리자 페이지 열기</a><spanclass="muted small">— 오른쪽 사이트 관리 창에서도 바로 관리할 수 있습니다</span></div>
<!-- v1.3.2: 이 사이트의 메일 시스템 상태 (운영자가 켜면 "메일시스템 설정중" → DNS 확인 후 "사용 가능") -->
<h2>문의 접수 내역 <spanclass="muted small"id="inquiryCount"></span><buttontype="button"class="ghost small-btn"id="btnInquiryReload">새로고침</button><buttontype="button"class="help"data-tip="사이트 문의 폼으로 들어온 내용입니다. 문의 수신 이메일이 설정되어 있으면 메일로도 발송되며, 미발송 건은 '재발송'으로 다시 보낼 수 있습니다.">?</button></h2>
<pclass="muted small"id="inquiryNote"></p>
<ulid="inquiryList"class="git-list"></ul>
</section>
<!-- v1.7.2 (요구 2): 사이트 정보는 오른쪽 캔버스의 "사이트 정보" 페이지(public/site-info.js)로 옮겼다. 여기에는 요약 세 줄과 "자세히 보기" 만 남는다 (app.js renderStats) -->
<sectionclass="card hidden"id="siteInfoCard">
<h2>사이트 정보 <spanclass="muted small"id="statsUpdated"></span><buttontype="button"class="ghost small-btn"id="btnStatsReload">새로고침</button><buttontype="button"class="help"data-tip="접속 통계·네트워크 사용량(송신/수신)·디스크 사용량(웹·DB·메일)을 그래프로 보는 사이트 정보 페이지는 오른쪽 창에 열립니다. 방문자·페이지뷰·네트워크는 사이트가 올라간 서버의 접속 로그(5분 주기, 봇 제외)로 집계하고, 로그를 읽을 수 없는 서버는 통계 스크립트의 보고(추정)를 씁니다.">?</button></h2>
<divclass="row"><buttontype="button"class="primary small-btn"id="btnSiteInfoOpen">오른쪽 창에서 자세히 보기 (그래프)</button></div>
</section>
<!-- 사이트 관리하기·복사하기: 현황 분석 (v1.2.0) -->
<sectionclass="card hidden"id="analysisCard">
<h2>사이트 현황 분석 <spanclass="muted small"id="anAt"></span><buttontype="button"class="ghost small-btn"id="btnReanalyze">다시 분석</button><buttontype="button"class="help"data-tip="가져오거나 복사한 사이트의 파일 통계(종류별 개수·크기, 페이지, 사용 기술)와 웹서버 정보, AI 요약(구성·기술·수정 난이도·문제점·개선 제안)입니다. AI 요약은 '기본' 등급으로 실행되며 캐시가 차감됩니다.">?</button></h2>
<divid="anBody"class="small"></div>
</section>
<sectionclass="card hidden"id="usageCard">
<h2>캐시 사용 내역 <spanclass="muted small"id="usageScope"></span><buttontype="button"class="ghost small-btn"id="btnUsageDetail">상세 보기</button><buttontype="button"class="help"data-tip="작업 단위(생성·수정·검증 등)별 사용 캐시입니다. 작업이 끝날 때 잔액에서 차감되며 중단된 회차(*)는 추정값입니다. 최근 5건이 보이고 표 안에서 스크롤하면 나머지가 보입니다. 상세 보기에서 전체 이용 내역과 일간·주간·월간 사용량을 볼 수 있습니다.">?</button></h2>
<divclass="totals">
<divclass="tot"><spanclass="k">이 사이트 사용 캐시</span><spanclass="v"id="tKrw">0원</span></div>
<h2>템플릿으로 등록 <spanclass="pill small">관리자</span><buttontype="button"class="help"data-tip="지금 사이트의 파일을 템플릿으로 담습니다(이후 사이트를 고쳐도 템플릿은 그대로이며, 관리자 콘솔 › 템플릿 에서 '다시 담기' 로 바꿉니다). 사용자에게 보이게 하려면 관리자 콘솔에서 '사용자 사용 허용' 을 켭니다.">?</button></h2>
<divclass="small muted">사이트 ID <codeid="siteId"></code></div>
<divclass="row"style="margin-top:6px"><buttontype="button"class="ghost small-btn danger hidden"id="btnDeleteSite">사이트 폐기</button><buttontype="button"class="help"data-tip="사이트 폐기는 배포된 파일·도메인 설정·버전·통계·문의 데이터를 모두 지우며 되돌릴 수 없습니다. 가져온 사이트의 원본 서버 파일은 지우지 않습니다.">?</button></div>
</section>
</div>
<!-- ===== 도메인(domains, v1.4.0 → 1.6.40 분리): 서브 도메인 등록 / 도메인 검색·구매(장바구니) / 이미 가진 도메인 등록 / 사이트에 연결 — public/domains-ui.js ===== -->
<h2>내 문의 내역 <buttontype="button"class="ghost small-btn"id="btnFeedback2">새 글</button><buttontype="button"class="help"data-tip="사용 방법 문의, 불편한 점이나 오류, 바라는 기능을 운영팀에 보냅니다. 올리면 AI 가 내용을 분석해 운영팀에 전달하고, 운영팀 답변이 오면 여기에 표시됩니다.">?</button></h2>
<divid="mvEmpty"class="empty"><divclass="empty-inner"><h3>사이트 관리</h3><p>왼쪽 레일의 사이트 선택 상자에서 사이트를 고르면 여기에 <b>사이트 관리자 페이지</b>와 <b>사이트 정보</b>(통계·네트워크·디스크 그래프)가 표시됩니다.</p></div></div>
<label>제목<inputid="fbTitle"maxlength="120"placeholder="한 줄 요약"></label>
<label>내용 <spanclass="muted small">(무엇을 하려 했고, 무엇이 기대와 달랐는지)</span><textareaid="fbBody"rows="6"maxlength="5000"></textarea></label>
<pclass="muted small"id="fbContext"></p>
<divclass="fb-env-note small">보낼 때 문제 해결을 위해 <b>사용 환경 정보</b>가 함께 전송됩니다: 브라우저·운영체제, 화면 해상도와 창 크기, 화면 배율, 언어, 시간대, 서비스 버전, 현재 탭과 사이트 상태. 비밀번호나 입력 내용은 보내지 않습니다. <buttontype="button"class="ghost small-btn"id="fbEnvToggle">보낼 정보 보기</button><preclass="hidden"id="fbEnvPreview"></pre></div>
