@roottale/cms-renderer-next 0.41.0 → 0.41.2

package/dist/chunk-YUT4BRJY.js

@@ -0,0 +1,167 @@
+"use client";
+
+// src/templates/hero-carousel-client.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(query.matches);
+    const onChange = (event) => setReduced(event.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+function useDocumentVisible() {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    const onVisibility = () => setVisible(document.visibilityState === "visible");
+    onVisibility();
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+  return visible;
+}
+function HeroCarouselViewport({
+  slides,
+  autoplay,
+  intervalMs
+}) {
+  const reducedMotion = usePrefersReducedMotion();
+  const tabVisible = useDocumentVisible();
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: true,
+    duration: reducedMotion ? 1 : 20
+  });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const rootRef = useRef(null);
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+  }, [emblaApi]);
+  useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("select", onSelect);
+    emblaApi.on("reInit", onSelect);
+    return () => {
+      emblaApi.off("select", onSelect);
+      emblaApi.off("reInit", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+  const shouldAutoplay = autoplay && !reducedMotion && tabVisible;
+  useEffect(() => {
+    if (!emblaApi || !shouldAutoplay) return;
+    const id = window.setInterval(() => {
+      emblaApi.scrollNext();
+    }, intervalMs);
+    return () => window.clearInterval(id);
+  }, [emblaApi, shouldAutoplay, intervalMs]);
+  const scrollPrev = useCallback(() => {
+    emblaApi?.scrollPrev(reducedMotion);
+  }, [emblaApi, reducedMotion]);
+  const scrollNext = useCallback(() => {
+    emblaApi?.scrollNext(reducedMotion);
+  }, [emblaApi, reducedMotion]);
+  const scrollTo = useCallback(
+    (index) => {
+      emblaApi?.scrollTo(index, reducedMotion);
+    },
+    [emblaApi, reducedMotion]
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: "rt-tpl-hero-carousel",
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": "\uBC30\uACBD \uC774\uBBF8\uC9C0 \uCE90\uB7EC\uC140",
+      tabIndex: 0,
+      onKeyDown,
+      "data-reduced-motion": reducedMotion ? "true" : "false",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "rt-tpl-hero-carousel-viewport", ref: emblaRef, children: /* @__PURE__ */ jsx("div", { className: "rt-tpl-hero-carousel-track", children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rt-tpl-hero-carousel-slide",
+            "aria-roledescription": "slide",
+            "aria-label": `Slide ${index + 1} of ${slides.length}`,
+            "aria-hidden": index === selectedIndex ? void 0 : true,
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: "rt-tpl-hero-carousel-img",
+                src: slide.image,
+                alt: slide.alt,
+                "data-active": index === selectedIndex ? "true" : "false",
+                loading: index === 0 ? "eager" : "lazy"
+              }
+            )
+          },
+          `${slide.image}-${index}`
+        )) }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rt-tpl-hero-carousel-arrow rt-tpl-hero-carousel-arrow--prev",
+            "aria-label": "\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC",
+            onClick: scrollPrev,
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M15 5 8 12l7 7", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "rt-tpl-hero-carousel-arrow rt-tpl-hero-carousel-arrow--next",
+            "aria-label": "\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC",
+            onClick: scrollNext,
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "m9 5 7 7-7 7", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "rt-tpl-hero-carousel-controls", children: [
+          /* @__PURE__ */ jsx("div", { className: "rt-tpl-hero-carousel-dots", role: "tablist", "aria-label": "\uC2AC\uB77C\uC774\uB4DC \uC120\uD0DD", children: slides.map((_slide, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              className: "rt-tpl-hero-carousel-dot",
+              "aria-selected": index === selectedIndex,
+              "aria-label": `${index + 1}\uBC88 \uC2AC\uB77C\uC774\uB4DC\uB85C \uC774\uB3D9`,
+              "data-active": index === selectedIndex ? "true" : "false",
+              onClick: () => scrollTo(index)
+            },
+            index
+          )) }),
+          /* @__PURE__ */ jsxs("p", { className: "rt-tpl-hero-carousel-counter", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("span", { className: "rt-tpl-hero-carousel-counter-current", children: selectedIndex + 1 }),
+            "/",
+            /* @__PURE__ */ jsx("span", { className: "rt-tpl-hero-carousel-counter-total", children: slides.length })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  HeroCarouselViewport
+};
+//# sourceMappingURL=chunk-YUT4BRJY.js.map

package/dist/chunk-YUT4BRJY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/templates/hero-carousel-client.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * `hero` `carousel` variant — 배경 사진 전환 메커니즘만 담당하는 client\n * island (M6 서버 우선: 인터랙션 최소 단위 격리). 카피 오버레이(h1/subtitle/\n * eyebrow/CTA)는 `TemplateHero`(RSC, sections.tsx)가 서버에서 그린다 — 이\n * 컴포넌트는 배경 슬라이드 + 도트 + 화살표 + \"N/M\" 카운터만 렌더한다.\n *\n * 빌드 계약: 본 파일은 tsup 의 독립 entry(`hero-carousel-client`)로 번들되고\n * `esbuild-plugin-preserve-directives` 가 \"use client\" 지시어를 해당 청크\n * 최상단에 보존한다 — `templates.js`(서버 전용, 나머지 4개 hero variant +\n * rich-text/services/faq/cta-banner/trust/contact) 로 병합되지 않는다\n * (tsup.config.ts 참고).\n *\n * 모션 규율(M5, ds-rule-pack.md):\n * - `prefers-reduced-motion: reduce` → autoplay 강제 off + 전환은 embla\n *   `jump=true`(무전환) + Ken Burns 스케일 없음.\n * - Page Visibility API → 탭 비활성 시 autoplay 일시정지.\n * - 좌/우 화살표 키보드 이동(포커스가 캐러셀 안에 있을 때).\n * - WAI-ARIA carousel 패턴: 컨테이너 `role=\"region\"` +\n *   `aria-roledescription=\"carousel\"`, 슬라이드별 `aria-roledescription=\"slide\"`\n *   + `aria-label=\"Slide N of M\"`.\n */\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport useEmblaCarousel from \"embla-carousel-react\";\n\nexport interface HeroCarouselSlideInput {\n  readonly image: string;\n  readonly alt: string;\n  readonly caption?: string;\n}\n\nexport interface HeroCarouselViewportProps {\n  readonly slides: readonly HeroCarouselSlideInput[];\n  readonly autoplay: boolean;\n  readonly intervalMs: number;\n}\n\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = useState(false);\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setReduced(query.matches);\n    const onChange = (event: MediaQueryListEvent) => setReduced(event.matches);\n    query.addEventListener(\"change\", onChange);\n    return () => query.removeEventListener(\"change\", onChange);\n  }, []);\n  return reduced;\n}\n\nfunction useDocumentVisible(): boolean {\n  const [visible, setVisible] = useState(true);\n  useEffect(() => {\n    const onVisibility = () => setVisible(document.visibilityState === \"visible\");\n    onVisibility();\n    document.addEventListener(\"visibilitychange\", onVisibility);\n    return () => document.removeEventListener(\"visibilitychange\", onVisibility);\n  }, []);\n  return visible;\n}\n\nexport function HeroCarouselViewport({\n  slides,\n  autoplay,\n  intervalMs,\n}: HeroCarouselViewportProps) {\n  const reducedMotion = usePrefersReducedMotion();\n  const tabVisible = useDocumentVisible();\n  const [emblaRef, emblaApi] = useEmblaCarousel({\n    loop: true,\n    duration: reducedMotion ? 1 : 20,\n  });\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const onSelect = useCallback(() => {\n    if (!emblaApi) return;\n    setSelectedIndex(emblaApi.selectedScrollSnap());\n  }, [emblaApi]);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n    onSelect();\n    emblaApi.on(\"select\", onSelect);\n    emblaApi.on(\"reInit\", onSelect);\n    return () => {\n      emblaApi.off(\"select\", onSelect);\n      emblaApi.off(\"reInit\", onSelect);\n    };\n  }, [emblaApi, onSelect]);\n\n  const shouldAutoplay = autoplay && !reducedMotion && tabVisible;\n\n  useEffect(() => {\n    if (!emblaApi || !shouldAutoplay) return;\n    const id = window.setInterval(() => {\n      emblaApi.scrollNext();\n    }, intervalMs);\n    return () => window.clearInterval(id);\n  }, [emblaApi, shouldAutoplay, intervalMs]);\n\n  const scrollPrev = useCallback(() => {\n    emblaApi?.scrollPrev(reducedMotion);\n  }, [emblaApi, reducedMotion]);\n\n  const scrollNext = useCallback(() => {\n    emblaApi?.scrollNext(reducedMotion);\n  }, [emblaApi, reducedMotion]);\n\n  const scrollTo = useCallback(\n    (index: number) => {\n      emblaApi?.scrollTo(index, reducedMotion);\n    },\n    [emblaApi, reducedMotion],\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        scrollPrev();\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        scrollNext();\n      }\n    },\n    [scrollPrev, scrollNext],\n  );\n\n  return (\n    <div\n      ref={rootRef}\n      className=\"rt-tpl-hero-carousel\"\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label=\"배경 이미지 캐러셀\"\n      tabIndex={0}\n      onKeyDown={onKeyDown}\n      data-reduced-motion={reducedMotion ? \"true\" : \"false\"}\n    >\n      <div className=\"rt-tpl-hero-carousel-viewport\" ref={emblaRef}>\n        <div className=\"rt-tpl-hero-carousel-track\">\n          {slides.map((slide, index) => (\n            <div\n              key={`${slide.image}-${index}`}\n              className=\"rt-tpl-hero-carousel-slide\"\n              aria-roledescription=\"slide\"\n              aria-label={`Slide ${index + 1} of ${slides.length}`}\n              aria-hidden={index === selectedIndex ? undefined : true}\n            >\n              <img\n                className=\"rt-tpl-hero-carousel-img\"\n                src={slide.image}\n                alt={slide.alt}\n                data-active={index === selectedIndex ? \"true\" : \"false\"}\n                loading={index === 0 ? \"eager\" : \"lazy\"}\n              />\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        className=\"rt-tpl-hero-carousel-arrow rt-tpl-hero-carousel-arrow--prev\"\n        aria-label=\"이전 슬라이드\"\n        onClick={scrollPrev}\n      >\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"M15 5 8 12l7 7\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </button>\n      <button\n        type=\"button\"\n        className=\"rt-tpl-hero-carousel-arrow rt-tpl-hero-carousel-arrow--next\"\n        aria-label=\"다음 슬라이드\"\n        onClick={scrollNext}\n      >\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n          <path d=\"m9 5 7 7-7 7\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </button>\n\n      <div className=\"rt-tpl-hero-carousel-controls\">\n        <div className=\"rt-tpl-hero-carousel-dots\" role=\"tablist\" aria-label=\"슬라이드 선택\">\n          {slides.map((_slide, index) => (\n            <button\n              key={index}\n              type=\"button\"\n              role=\"tab\"\n              className=\"rt-tpl-hero-carousel-dot\"\n              aria-selected={index === selectedIndex}\n              aria-label={`${index + 1}번 슬라이드로 이동`}\n              data-active={index === selectedIndex ? \"true\" : \"false\"}\n              onClick={() => scrollTo(index)}\n            />\n          ))}\n        </div>\n        <p className=\"rt-tpl-hero-carousel-counter\" aria-hidden=\"true\">\n          <span className=\"rt-tpl-hero-carousel-counter-current\">\n            {selectedIndex + 1}\n          </span>\n          /\n          <span className=\"rt-tpl-hero-carousel-counter-total\">{slides.length}</span>\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/hero-carousel-client.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HeroCarouselSlideInput {
+    readonly image: string;
+    readonly alt: string;
+    readonly caption?: string;
+}
+interface HeroCarouselViewportProps {
+    readonly slides: readonly HeroCarouselSlideInput[];
+    readonly autoplay: boolean;
+    readonly intervalMs: number;
+}
+declare function HeroCarouselViewport({ slides, autoplay, intervalMs, }: HeroCarouselViewportProps): react_jsx_runtime.JSX.Element;
+
+export { type HeroCarouselSlideInput, HeroCarouselViewport, type HeroCarouselViewportProps };

package/dist/hero-carousel-client.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  HeroCarouselViewport
+} from "./chunk-YUT4BRJY.js";
+export {
+  HeroCarouselViewport
+};
+//# sourceMappingURL=hero-carousel-client.js.map

package/dist/hero-carousel-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/routes.js

@@ -623,7 +623,7 @@ function createFleetInfoRoute(config = {}) {
         site: config.site ?? env.VERCEL_PROJECT_PRODUCTION_URL ?? null,
         framework: "next",
         cms_client: CMS_CLIENT_VERSION,
-        cms_renderer: true ? "0.41.0" : "dev",
+        cms_renderer: true ? "0.41.2" : "dev",
         build_sha: env.VERCEL_GIT_COMMIT_SHA?.slice(0, 7) ?? null
       },
       { headers: { "cache-control": "public, max-age=300" } }

package/dist/server.d.ts

@@ -123,7 +123,8 @@ declare function RootTaleFloatingCta(props: RootTaleFloatingCtaProps): ReactElem
  * redirectPath prop:
  * - 외부 사이트가 폼 제출 후 돌아갈 path (API 가 allowlist 검증, ?ok=1 / ?err=*)
  *
- * 0 JS RSC. customer-facing className 전체 `.rt-cms-*` prefix, scoped via
+ * RSC form. Turnstile를 켠 경우 Cloudflare 위젯 script만 추가한다.
+ * customer-facing className 전체 `.rt-cms-*` prefix, scoped via
  * `[data-roottale-cms]` (cms-public.css). customer override 자유.
  */
 
@@ -149,6 +150,7 @@ interface RootTaleLeadFormProps {
     heading?: string;
     description?: string;
     submitLabel?: string;
+    turnstileSiteKey?: string;
     /** 추가 클래스 (customer 디자인 hook). */
     className?: string;
 }

package/dist/server.js

@@ -17,14 +17,15 @@ import {
   renderBlocks,
   renderBoundBlocks,
   themeToCssVars
-} from "./chunk-6AFM2UR5.js";
+} from "./chunk-5R6APJZ2.js";
 import {
   collectCategories,
   collectCategoriesWithCounts,
   defaultCategoryHref,
   filterPostsByCategory
 } from "./chunk-FUA5H6JE.js";
-import "./chunk-IOYBEH6E.js";
+import "./chunk-QKZ4HRBB.js";
+import "./chunk-YUT4BRJY.js";
 export {
   RenderTiptap,
   RootTaleBlogCategories,

package/dist/templates.css

@@ -489,3 +489,199 @@
   font-family: ui-monospace, monospace;
   font-size: 0.875rem;
 }
+
+/* ── hero: carousel (ADR-0073 K3 C1) ─────────────────────────────────────────
+ * 별도 섹션에 둔다 — 위 legacy 5종/trust/contact CSS 는 트러스트 회귀 테스트가
+ * "@media 금지 + hex 리터럴 금지"를 강제하는 영역이라(`trust-contact.test.tsx`),
+ * `prefers-reduced-motion` 미디어쿼리가 필요한 이 variant 는 그 계약 밖에
+ * 둬야 두 계약이 충돌하지 않는다. 풀스크린은 컨테이너 쿼리 대신 `svh` 사용
+ * (이 리포에 아직 block-axis(`cqb`/`container-type: size`) 컨벤션이 없음 —
+ * S2 의 inline-axis(`cqi`) 컨벤션과는 다른 축이라 그대로 확장할 수 없다.
+ * ds-rule-pack.md 에 명시된 편차). */
+
+[data-roottale-tpl="hero"][data-variant="carousel"] {
+  position: relative;
+  container-type: inline-size;
+  padding-block: 0;
+  overflow: hidden;
+  /* 고정 100svh — `min-block-size` 였다면 절대배치 아닌 자손(과거 컨트롤 바)이
+   * grid auto-row 를 밀어 첫 화면보다 커질 수 있다. 자손은 전부
+   * absolute/inset 로 이 고정 박스 안에서만 움직인다. */
+  block-size: 100svh;
+  display: grid;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"] :where(.rt-tpl-hero-carousel),
+[data-roottale-tpl="hero"][data-variant="carousel"] :where(.rt-tpl-hero-carousel-overlay) {
+  grid-area: 1 / 1;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"] :where(.rt-tpl-hero-carousel) {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-viewport) {
+  overflow: hidden;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-track) {
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-slide) {
+  position: relative;
+  flex: 0 0 100%;
+  block-size: 100%;
+  overflow: hidden;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-img) {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  transform: scale(1);
+}
+
+/* Ken Burns — 활성 슬라이드만, reduced-motion 아닐 때만(M5). */
+@media (prefers-reduced-motion: no-preference) {
+  [data-roottale-tpl="hero"][data-variant="carousel"]
+    :where(.rt-tpl-hero-carousel-img[data-active="true"]) {
+    animation: rt-hero-carousel-kenburns 8s ease-out forwards;
+  }
+}
+
+@keyframes rt-hero-carousel-kenburns {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(1.05);
+  }
+}
+
+/* 카피 오버레이 — 슬라이드와 무관하게 고정. 배경 위 대비 확보용 스크림. */
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-overlay) {
+  position: relative;
+  z-index: 1;
+  align-self: end;
+  inline-size: 100%;
+  padding-block-end: clamp(2.5rem, 8cqi, 6rem);
+  padding-block-start: clamp(6rem, 20cqi, 10rem);
+  background: linear-gradient(
+    to top,
+    color-mix(in srgb, var(--rt-color-background, #06162f) 78%, transparent) 0%,
+    transparent 100%
+  );
+  color: var(--rt-color-primary-foreground, #ffffff);
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-title) {
+  font-size: clamp(2.5rem, 9cqi, 5rem);
+  font-weight: 900;
+  color: inherit;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-subtitle) {
+  color: color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 82%, transparent);
+  max-inline-size: 40rem;
+}
+
+/* 화살표 */
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-arrow) {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 35%, transparent);
+  background: color-mix(in srgb, var(--rt-color-background, #06162f) 35%, transparent);
+  color: var(--rt-color-primary-foreground, #ffffff);
+  cursor: pointer;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-arrow svg) {
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-arrow--prev) {
+  inset-inline-start: clamp(1rem, 4cqi, 2.5rem);
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-arrow--next) {
+  inset-inline-end: clamp(1rem, 4cqi, 2.5rem);
+}
+
+/* 도트 + N/M 카운터 — absolute 로 뷰포트 바닥에 고정(일반 flow 에 두면 카피
+ * 오버레이 아래로 페이지 높이가 100svh 를 넘어버린다, VRT 로 실측). */
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-controls) {
+  position: absolute;
+  z-index: 2;
+  inset-inline: 0;
+  inset-block-end: clamp(1rem, 3cqi, 1.5rem);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  max-inline-size: var(--rt-tpl-page-max, 72rem);
+  margin-inline: auto;
+  padding-inline: 1.25rem;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-dots) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-dot) {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 999px;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--rt-color-primary-foreground, #ffffff) 40%, transparent);
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-dot[data-active="true"]) {
+  background: var(--rt-color-primary-foreground, #ffffff);
+}
+
+[data-roottale-tpl="hero"][data-variant="carousel"]
+  :where(.rt-tpl-hero-carousel-counter) {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--rt-color-primary-foreground, #ffffff);
+  font-size: 0.875rem;
+  letter-spacing: 0.04em;
+}

package/dist/templates.d.ts

@@ -64,12 +64,12 @@ declare const CtaSchema: z.ZodObject<{
     label: string;
 }>;
 type SectionCta = z.infer<typeof CtaSchema>;
-declare const HeroSectionSchema: z.ZodObject<{
+declare const HeroSectionSchema: z.ZodEffects<z.ZodObject<{
     id: z.ZodOptional<z.ZodString>;
     theme: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
 } & {
     type: z.ZodLiteral<"hero">;
-    variant: z.ZodDefault<z.ZodEnum<["split", "image", "minimal"]>>;
+    variant: z.ZodDefault<z.ZodEnum<["split", "image", "minimal", "carousel"]>>;
     props: z.ZodObject<{
         eyebrow: z.ZodOptional<z.ZodString>;
         /** `\n` 으로 줄바꿈. */
@@ -87,6 +87,26 @@ declare const HeroSectionSchema: z.ZodObject<{
             href: string;
             label: string;
         }>>;
+        /** `carousel` 전용 — 고정 카피 아래 배경만 전환되는 슬라이드. 2-6개. */
+        slides: z.ZodOptional<z.ZodArray<z.ZodObject<{
+            image: z.ZodString;
+            alt: z.ZodString;
+            caption: z.ZodOptional<z.ZodString>;
+        }, "strip", z.ZodTypeAny, {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }, {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }>, "many">>;
+        /** `carousel` 전용 — 부제(슬라이드와 무관한 고정 카피). */
+        subtitle: z.ZodOptional<z.ZodString>;
+        /** `carousel` 전용. 기본 true — `useReducedMotion` 시 렌더러가 강제 off. */
+        autoplay: z.ZodOptional<z.ZodBoolean>;
+        /** `carousel` 전용, ms. 기본 6000. */
+        intervalMs: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
         title: string;
         description?: string | undefined;
@@ -97,6 +117,14 @@ declare const HeroSectionSchema: z.ZodObject<{
             href: string;
             label: string;
         } | undefined;
+        slides?: {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }[] | undefined;
+        subtitle?: string | undefined;
+        autoplay?: boolean | undefined;
+        intervalMs?: number | undefined;
     }, {
         title: string;
         description?: string | undefined;
@@ -107,10 +135,66 @@ declare const HeroSectionSchema: z.ZodObject<{
             href: string;
             label: string;
         } | undefined;
+        slides?: {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }[] | undefined;
+        subtitle?: string | undefined;
+        autoplay?: boolean | undefined;
+        intervalMs?: number | undefined;
     }>;
 }, "strip", z.ZodTypeAny, {
     type: "hero";
-    variant: "image" | "split" | "minimal";
+    variant: "image" | "split" | "minimal" | "carousel";
+    props: {
+        title: string;
+        description?: string | undefined;
+        eyebrow?: string | undefined;
+        imageSrc?: string | undefined;
+        imageAlt?: string | undefined;
+        cta?: {
+            href: string;
+            label: string;
+        } | undefined;
+        slides?: {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }[] | undefined;
+        subtitle?: string | undefined;
+        autoplay?: boolean | undefined;
+        intervalMs?: number | undefined;
+    };
+    theme?: Record<string, string> | undefined;
+    id?: string | undefined;
+}, {
+    type: "hero";
+    props: {
+        title: string;
+        description?: string | undefined;
+        eyebrow?: string | undefined;
+        imageSrc?: string | undefined;
+        imageAlt?: string | undefined;
+        cta?: {
+            href: string;
+            label: string;
+        } | undefined;
+        slides?: {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }[] | undefined;
+        subtitle?: string | undefined;
+        autoplay?: boolean | undefined;
+        intervalMs?: number | undefined;
+    };
+    theme?: Record<string, string> | undefined;
+    id?: string | undefined;
+    variant?: "image" | "split" | "minimal" | "carousel" | undefined;
+}>, {
+    type: "hero";
+    variant: "image" | "split" | "minimal" | "carousel";
     props: {
         title: string;
         description?: string | undefined;
@@ -121,6 +205,14 @@ declare const HeroSectionSchema: z.ZodObject<{
             href: string;
             label: string;
         } | undefined;
+        slides?: {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }[] | undefined;
+        subtitle?: string | undefined;
+        autoplay?: boolean | undefined;
+        intervalMs?: number | undefined;
     };
     theme?: Record<string, string> | undefined;
     id?: string | undefined;
@@ -136,10 +228,18 @@ declare const HeroSectionSchema: z.ZodObject<{
             href: string;
             label: string;
         } | undefined;
+        slides?: {
+            image: string;
+            alt: string;
+            caption?: string | undefined;
+        }[] | undefined;
+        subtitle?: string | undefined;
+        autoplay?: boolean | undefined;
+        intervalMs?: number | undefined;
     };
     theme?: Record<string, string> | undefined;
     id?: string | undefined;
-    variant?: "image" | "split" | "minimal" | undefined;
+    variant?: "image" | "split" | "minimal" | "carousel" | undefined;
 }>;
 declare const RichTextSectionSchema: z.ZodObject<{
     id: z.ZodOptional<z.ZodString>;
@@ -1041,7 +1141,7 @@ declare function defineSiteConfig(input: SiteConfigInput): SiteConfig;
 
 /** 섹션 `theme`(--rt-* 변수 override)를 inline style 로. */
 declare function sectionThemeStyle(theme: Record<string, string> | undefined): CSSProperties | undefined;
-/** 빌트인 `hero`. variant: split(기본) / image / minimal. */
+/** 빌트인 `hero`. variant: split(기본) / image / minimal / carousel. */
 declare function TemplateHero(section: HeroSection): ReactElement;
 /** 빌트인 `rich-text`. 문단은 `\n\n` 분리. */
 declare function TemplateRichText(section: RichTextSection): ReactElement;

package/dist/templates.js

@@ -10,7 +10,7 @@ import {
   TemplateTrust,
   sectionThemeStyle,
   themeToCssVars
-} from "./chunk-6AFM2UR5.js";
+} from "./chunk-5R6APJZ2.js";
 import "./chunk-FUA5H6JE.js";
 import {
   BUILTIN_SECTION_SCHEMAS,
@@ -30,7 +30,8 @@ import {
   TrustSectionSchema,
   defineSiteConfig,
   parseSiteConfig
-} from "./chunk-IOYBEH6E.js";
+} from "./chunk-QKZ4HRBB.js";
+import "./chunk-YUT4BRJY.js";
 
 // src/templates/SiteRenderer.tsx
 import {