만든 작품을,
드림독에서도 편하게.

이 작품은 Dreamdock(dreamdock.co)에 올릴 거야. Dreamdock은 작품을 격리된 sandbox iframe에서 실행해서 아래 제약이 있어. 코드를 이 규칙에 맞춰 만들어 줘.

1. 외부 리소스 금지: CDN 스크립트, 웹폰트 URL, fetch/XHR/WebSocket/EventSource, 외부 이미지 URL 모두 차단됨. 필요한 라이브러리·폰트·이미지는 파일에 포함하거나 인라인(data URL)으로.
2. localStorage / sessionStorage / cookie / IndexedDB 직접 사용 금지. 저장이 필요하면 프로젝트에 포함된 dreamdock.js의 Dreamdock.save(value) / Dreamdock.load() 를 써. 둘 다 Promise를 반환하고, 저장 값은 문자열 또는 JSON 직렬화 가능한 객체야(작품당 10MB). 앱 시작 시 load()로 복원하고(문자열 또는 null, 파싱 오류 처리), 복원 전에는 자동 저장하지 말고, 상태가 바뀔 때 디바운스해서 save() 해. false가 오면 작업은 유지하고 실패를 표시해.
3. 파일 내려받기는 Blob + <a download> 클릭 패턴으로 만들면 Dreamdock이 자동으로 "파일 저장" 버튼으로 바꿔 줘. window.open이나 showSaveFilePicker는 쓰지 마.
4. 최종 결과물은 브라우저에서 바로 여는 HTML(+ 상대경로 CSS/JS)이어야 해. ES 모듈(type="module", import/export)이 남아 있으면 발행이 거부되니 번들러를 쓰면 IIFE로 출력하고 type="module"을 제거해. 페이지 이동·새 창 열기·폼 submit도 하지 마 (모두 차단됨).
5. 크기는 두 가지 중 하나로 정해 줘.
   (a) 고정 캔버스(게임·픽셀아트 등)라면 <head>에 <meta name="dreamdock-size" content="가로x세로">로 본래 크기를 선언해. 플레이어가 그 비율로 자리를 잡고 화면에 맞춰 통째로 축소·확대해 주니까, 그 크기 안에서만 그리면 돼.
   (b) 반응형(도구·에디터 등)이라면 선언하지 말고 100% × 100%(또는 100dvh) 레이아웃으로 만들어. 플레이어 안에서는 뷰포트가 대략 "글 폭 × 화면 높이의 70%" 정도이고, 전체화면·시어터·새 창에서는 창 전체가 뷰포트야. 세로 400px 정도에서도 핵심 조작이 보이게 하고, 툴바는 접히거나 스크롤되게 해 줘.
6. 작품이 iframe 안에서 실행되니 브라우저 창 크기가 아니라 자기 뷰포트(innerWidth/innerHeight) 기준으로 레이아웃하고, 마우스 없이 터치로도 조작되게 해 줘.
7. 유튜브 음악·영상을 틀어야 하면 <iframe>이나 YouTube API를 쓰지 말고(둘 다 차단됨) 실행 환경이 제공하는 window.dreamdock.media 를 써. load(videoId, {title, autoplay}) / play() / pause() / seek(sec) / volume(0~100) / stop() / onState(fn) / anchor(el) 이 전부야. 영상은 작품 밖(프레임 아래 바)에 200×200으로 보이고, 첫 재생은 방문자가 그 바의 ▶를 눌러야 시작되니 UI에 "아래 ▶를 눌러 시작" 안내를 넣어 줘. 내 컴퓨터에서 열 땐 dreamdock 객체가 없으니 존재 여부를 확인하고 호출해.

let gallery = null, viewing = null;
addEventListener("message", (e) => {
  const d = e.data; if (!d || d.source !== "dreamdock-runtime") return;
  if (d.type === "pd-gallery-ready") {
    gallery = d; publishBtn.hidden = false; publishBtn.disabled = !d.loggedIn;
    publishBtn.textContent = d.editing ? "새 버전으로 저장" : (d.loggedIn ? "갤러리에 게시" : "게시하려면 드림독 로그인");
  }
  if (d.type === "pd-publish-result") toast(d.ok ? (d.updated ? "저장됐어요" : "게시됐어요 → " + d.url) : "실패: " + d.error);
  if (d.type === "pd-creation-load") { viewing = d; load(d.project); if (d.readOnly) enterViewMode(); else enterEditMode(); }
  if (d.type === "pd-creation-list") renderMyList(d.items);
});
publishBtn.onclick = () => parent.postMessage({ source: "dreamdock-thing", type: "pd-publish", project: getProject() }, "*");
// 스크립트가 늦게 떴다면 (감상 페이지에서 load를 놓쳤을 때):
parent.postMessage({ source: "dreamdock-thing", type: "pd-creation-request" }, "*");
// 내 컬렉션 목록(선택): parent.postMessage({ source: "dreamdock-thing", type: "pd-creation-list", scope: "mine" }, "*");