kwon-ui 0.0.0-stage → 0.2.0

package/dist/kwon-ui.css

@@ -0,0 +1,523 @@
+/* kwon-ui 0.2.0. 이 파일은 빌드 결과다. 앱에서 고치지 않는다. 원본: src/css/ */
+
+/* ── tokens.css ── */
+/*
+ * 토큰. 색, 글자 크기, 모서리, 폭 같은 값은 이 파일에만 있다.
+ * 앱 코드와 이 패키지의 다른 CSS 는 값을 직접 쓰지 않고 이 변수만 쓴다.
+ * 값은 kwonandcompany.com 의 밤 테마(운영 화면)에서 그대로 옮겼다.
+ */
+.night {
+  /* 바탕과 면 */
+  --n-bg: #000000;
+  --n-panel: #0d0d0d;
+  --n-card: #171717;
+  --n-card-2: #202020;
+  --n-line: rgba(255, 255, 255, 0.1);
+
+  /* 글자 네 톤: 진한 글자, 본문, 받쳐 주는 말, 가장 흐린 글 */
+  --n-hi: #ffffff;
+  --n-soft: rgba(255, 255, 255, 0.78);
+  --n-mid: rgba(255, 255, 255, 0.5);
+  --n-dim: rgba(255, 255, 255, 0.32);
+
+  /* 버튼 */
+  --n-btn: #ffffff;
+  --n-btn-ink: #000000;
+  --n-btn-hover: #e9e9e9;
+  --n-ghost: rgba(255, 255, 255, 0.08);
+  --n-ghost-hover: rgba(255, 255, 255, 0.16);
+  --n-focus: rgba(255, 255, 255, 0.55);
+
+  /* 사진 위: 글 뒤를 누르는 그늘 두 단계, 사진 위에서 받쳐 주는 말의 색 */
+  --n-shade: rgba(0, 0, 0, 0.82);
+  --n-shade-soft: rgba(0, 0, 0, 0.1);
+  --n-on-photo: rgba(255, 255, 255, 0.62);
+
+  /* 글자 크기. 읽는 글은 제목, 본문, 작은 글 셋이다. display 는 첫 화면 제목, control 은 버튼과 링크 */
+  --n-fs-display: clamp(34px, 3.8vw, 50px);
+  --n-fs-title: clamp(26px, 2.4vw, 32px);
+  --n-fs-body: 18px;
+  --n-fs-small: 14px;
+  --n-fs-control: 15px;
+
+  /* 모서리: 판, 그림, 알약 */
+  --n-radius: 32px;
+  --n-radius-md: 20px;
+  --n-radius-pill: 999px;
+
+  /* 폭과 바깥 여백 */
+  --n-wrap: 1064px;
+  --n-gutter: 24px;
+  --n-edge: clamp(20px, 3.2vw, 48px);
+
+  /* 글꼴 이름. 글꼴 파일은 앱이 불러온다(패키지는 글꼴을 싣지 않는다) */
+  --n-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+}
+@media (min-width: 768px) {
+  .night {
+    --n-gutter: 40px;
+  }
+}
+
+/* ── base.css ── */
+/*
+ * 바탕. 페이지 맨 바깥 요소에 .night 를 붙이면 그 안이 검은 화면이 된다.
+ * 여백(margin)과 글꼴 지정은 넣지 않는다: 앱의 초기화 규칙과 Tailwind 유틸리티가 그대로 먹어야 한다.
+ */
+.night {
+  background: var(--n-bg);
+  color: var(--n-hi);
+  font-weight: 400;
+  overflow-x: clip;
+  /* 한글은 낱말 단위로만 줄을 바꾼다(글자 중간에서 끊지 않는다) */
+  word-break: keep-all;
+}
+/* 스크롤 끝에서 흰 바탕이 비치지 않게 문서 바탕도 검정으로 덮는다 */
+html:has(.night),
+html:has(.night) body {
+  background: #000000;
+}
+
+/* 화면에는 안 보이고 화면 낭독기만 읽는 글(두 톤 제목 앞의 구간 이름) */
+.night .n-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* ── type.css ── */
+/*
+ * 글자. 읽는 글자 크기는 화면마다 셋이다: 제목(n-title), 본문(n-body), 작은 글(n-small).
+ * n-display 는 첫 화면 제목에만 쓴다. 위계는 굵기 대신 두 톤(--n-hi, --n-mid)으로 만든다.
+ * 굵기는 제목 500, 본문 400 두 가지다.
+ */
+.night .n-display {
+  font-size: var(--n-fs-display);
+  line-height: 1.16;
+  letter-spacing: -0.035em;
+  font-weight: 500;
+  color: var(--n-hi);
+}
+.night .n-title {
+  font-size: var(--n-fs-title);
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  font-weight: 500;
+  color: var(--n-hi);
+}
+/* 여러 줄 제목은 줄 길이를 고르게 맞춘다 */
+.night :is(.n-display, .n-title) {
+  text-wrap: balance;
+}
+/* 두 톤: 제목 안에서 받쳐 주는 말. lo 는 줄을 바꿔서, lo-inline 은 같은 줄에서 회색 */
+.night .n-title .lo,
+.night .n-display .lo {
+  display: block;
+  color: var(--n-mid);
+}
+.night .n-title .lo-inline,
+.night .n-display .lo-inline {
+  color: var(--n-mid);
+}
+.night .n-body {
+  font-size: var(--n-fs-body);
+  line-height: 1.5;
+  letter-spacing: -0.01em;
+  color: var(--n-soft);
+  /* 마지막 줄에 낱말 하나만 남지 않게 */
+  text-wrap: pretty;
+}
+/* 목록이나 카드 안의 작은 제목. 본문과 같은 크기이고 진한 글자 */
+.night .n-card-title {
+  font-size: var(--n-fs-body);
+  line-height: 1.4;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+  color: var(--n-hi);
+}
+.night .n-small {
+  font-size: var(--n-fs-small);
+  line-height: 1.45;
+  letter-spacing: 0;
+  color: var(--n-mid);
+}
+/* 본문과 작은 글 안의 진한 낱말(기관 이름, 핵심 구절). 굵기는 그대로 두고 색만 올린다 */
+.night :is(.n-body, .n-small) .hi {
+  color: var(--n-hi);
+}
+/* 숫자가 세로로 줄이 맞아야 하는 곳(연도, 금액) */
+.night .n-num {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+
+/* ── layout.css ── */
+/*
+ * 뼈대. 읽는 글은 한 줄기로 흐른다: 왼쪽에 작은 라벨이나 제목, 오른쪽 한 칸에 본문.
+ * 규칙의 순서를 바꾸지 않는다(특이도가 같은 규칙은 뒤에 온 것이 이긴다).
+ */
+
+/* 내용 폭: 가운데 1064px */
+.night .n-wrap {
+  width: 100%;
+  max-width: var(--n-wrap);
+  margin-inline: auto;
+  padding-inline: var(--n-gutter);
+}
+
+/* 하위 페이지의 바깥과 머리. 위 여백은 떠 있는 메뉴 자리다 */
+.night.n-page {
+  padding-top: clamp(120px, 12vw, 164px);
+  min-height: 100vh;
+}
+.night .n-page-head {
+  padding-bottom: 72px;
+}
+@media (min-width: 1024px) {
+  .night .n-page-head {
+    padding-bottom: 96px;
+  }
+}
+
+/* 구간 */
+.night .n-sect {
+  position: relative;
+  padding: 96px 0 72px;
+}
+@media (min-width: 1024px) {
+  .night .n-sect {
+    padding: 128px 0 96px;
+  }
+}
+
+/* 짧은 구간: 문장 하나와 버튼 하나뿐인 줄 */
+.night .n-sect.slim {
+  padding-block: 64px;
+}
+@media (min-width: 1024px) {
+  .night .n-sect.slim {
+    padding-block: 80px;
+  }
+}
+/* 선으로 시작하는 구간: 앞 구간과의 사이에 가는 선을 내용 폭만큼 긋는다 */
+.night .n-sect.ruled::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: max(var(--n-gutter), calc(50% - var(--n-wrap) / 2 + var(--n-gutter)));
+  right: max(var(--n-gutter), calc(50% - var(--n-wrap) / 2 + var(--n-gutter)));
+  border-top: 1px solid var(--n-line);
+}
+
+/* 가는 선 하나(위쪽) */
+.night .n-rule {
+  border-top: 1px solid var(--n-line);
+}
+
+/* 구간 머리: 넓은 화면에서 왼쪽 제목, 오른쪽 본문 */
+.night .n-head {
+  display: grid;
+  gap: 16px;
+  margin-bottom: 48px;
+}
+@media (min-width: 1024px) {
+  .night .n-head {
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    gap: 40px;
+    margin-bottom: 64px;
+  }
+  .night .n-head > :last-child {
+    max-width: 30em;
+    justify-self: end;
+  }
+}
+/* 제목만 있으면 한 줄 전체를 쓴다 */
+.night .n-head > :only-child {
+  justify-self: start;
+  max-width: none;
+  grid-column: 1 / -1;
+}
+/* 선으로 시작하는 구간 머리(<SectionHead rule>). 위 여백까지 한 이름으로 묶었다 */
+.night .n-head.ruled {
+  border-top: 1px solid var(--n-line);
+  padding-top: 48px;
+}
+@media (min-width: 768px) {
+  .night .n-head.ruled {
+    padding-top: 64px;
+  }
+}
+/* 페이지 머리 안에서는 아래 여백을 페이지 머리가 정한다 */
+.night .n-page-head > .n-head {
+  margin-bottom: 0;
+}
+
+/* 줄 목록: 왼쪽 200px 라벨, 오른쪽 본문. 라벨과 본문은 첫 줄의 글자 밑선을 맞추고, 긴 낱말이 칸을 밀지 않게 한다 */
+.night .n-rows {
+  border-top: 1px solid var(--n-line);
+}
+.night .n-row {
+  display: grid;
+  gap: 8px 24px;
+  align-items: baseline;
+  padding: 24px 0;
+  border-bottom: 1px solid var(--n-line);
+}
+@media (min-width: 768px) {
+  .night .n-row {
+    grid-template-columns: 200px minmax(0, 1fr);
+    padding: 28px 0;
+  }
+  .night .n-row.wide-label {
+    grid-template-columns: 280px minmax(0, 1fr);
+  }
+}
+.night .n-row > .n-row-label {
+  font-size: var(--n-fs-small);
+  line-height: 1.6;
+  font-weight: 400;
+  letter-spacing: 0;
+  color: var(--n-mid);
+}
+.night .n-rows > .n-row:last-child {
+  border-bottom: 0;
+}
+
+/* 검은 판: 화면 양옆에서 한 칸 들어온 둥근 면 */
+.night .n-panel {
+  position: relative;
+  z-index: 1;
+  margin: 0 var(--n-gutter);
+  border-radius: var(--n-radius);
+  background: var(--n-panel);
+  padding: 88px 0 72px;
+}
+@media (min-width: 1024px) {
+  .night .n-panel {
+    padding: 120px 0 104px;
+  }
+}
+@media (max-width: 767px) {
+  .night .n-panel {
+    margin: 0 12px;
+    padding: 72px 0 56px;
+  }
+  .night .n-panel .n-wrap {
+    padding: 0 16px;
+  }
+}
+
+/* 그림과 영상의 틀 */
+.night .n-media {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  border-radius: var(--n-radius-md);
+  overflow: hidden;
+  background: var(--n-card);
+}
+.night .n-media.wide {
+  aspect-ratio: 16 / 9;
+}
+.night .n-media video,
+.night .n-media img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 사진 판: 어둡게 누른 사진 위 왼쪽 아래에 글. 사진(img, video)은 판을 채운다.
+   쌓이는 순서(사진, 그늘, 글)는 판 안에 가둔다(isolation). 글의 z-index 가 판 밖의 요소와 겨루지 않는다 */
+.night .n-photo {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  min-height: 480px;
+  border-radius: var(--n-radius);
+  background: var(--n-card);
+}
+@media (min-width: 1024px) {
+  .night .n-photo {
+    min-height: 560px;
+  }
+}
+.night .n-photo > img,
+.night .n-photo > video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.8) brightness(0.62);
+}
+.night .n-photo::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to top, var(--n-shade), var(--n-shade-soft) 65%);
+}
+.night .n-photo-in {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 16px;
+  padding: 40px 28px;
+  max-width: 640px;
+}
+@media (min-width: 1024px) {
+  .night .n-photo-in {
+    padding: 64px;
+  }
+}
+/* 사진 위에서는 받쳐 주는 말을 조금 밝게 둔다(50% 회색은 사진 위에서 묻힌다) */
+.night .n-photo .n-title .lo-inline {
+  color: var(--n-on-photo);
+}
+/* 판 안에 버튼 줄이 있으면 문단과 40px 띄운다(안쪽 간격 16px에 더한다) */
+.night .n-photo-in > .n-actions {
+  margin-top: 24px;
+}
+
+/* 문의 띠: 왼쪽 문장, 오른쪽 버튼 */
+.night .n-cta-band {
+  display: grid;
+  gap: 24px;
+  padding: 56px 0 8px;
+  border-top: 1px solid var(--n-line);
+}
+@media (min-width: 768px) {
+  .night .n-cta-band {
+    grid-template-columns: 1fr auto;
+    align-items: center;
+  }
+}
+.night .n-cta-band .n-title + .n-body {
+  margin-top: 16px;
+  max-width: 34em;
+}
+
+/* ── controls.css ── */
+/*
+ * 조작부. 첫 화면과 띠에는 버튼 하나(알약)와 글자 링크 하나까지만 둔다.
+ */
+
+/* 알약 버튼: 높이 48, 흰 면. ghost 는 어두운 면 */
+.night .n-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 48px;
+  padding: 0 28px;
+  border-radius: var(--n-radius-pill);
+  background: var(--n-btn);
+  color: var(--n-btn-ink);
+  font-size: var(--n-fs-control);
+  line-height: 1;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  transition:
+    background-color 0.2s,
+    transform 0.2s;
+}
+.night .n-pill:hover {
+  background: var(--n-btn-hover);
+}
+.night .n-pill.ghost {
+  background: var(--n-ghost);
+  color: var(--n-hi);
+}
+.night .n-pill.ghost:hover {
+  background: var(--n-ghost-hover);
+}
+.night .n-pill:focus-visible {
+  outline: 2px solid var(--n-focus);
+  outline-offset: 3px;
+}
+
+/* 글자 링크: 버튼 옆의 둘째 행동, 본문 아래의 '더 보기' */
+.night .n-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--n-fs-control);
+  /* 줄 높이를 물려받지 않고 정한다(앱마다 바탕 줄 높이가 달라 링크 높이가 달라졌다) */
+  line-height: 1.6;
+  font-weight: 500;
+  color: var(--n-hi);
+  transition: opacity 0.2s;
+}
+.night .n-link:hover {
+  opacity: 0.7;
+}
+
+/* 버튼과 링크를 나란히 놓는 줄 */
+.night .n-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px 32px;
+}
+.night .n-page-head > .n-actions {
+  margin-top: 48px;
+}
+
+/* ── timeline.css ── */
+/*
+ * 연도별 이력. 왼쪽에 연도, 오른쪽에 그 해의 줄들. 많으면 앞의 몇 줄만 보이고 '외 N건'으로 접는다.
+ */
+.night .n-timeline {
+  border-top: 1px solid var(--n-line);
+}
+.night .n-tl-year {
+  display: grid;
+  gap: 12px;
+  padding: 28px 0;
+  border-bottom: 1px solid var(--n-line);
+}
+@media (min-width: 768px) {
+  .night .n-tl-year {
+    grid-template-columns: 160px 1fr;
+    gap: 24px;
+  }
+}
+.night .n-tl-year ul {
+  display: grid;
+  gap: 12px;
+}
+.night .n-tl-more summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: max-content;
+  cursor: pointer;
+  list-style: none;
+  transition: color 0.2s;
+}
+.night .n-tl-more summary::-webkit-details-marker {
+  display: none;
+}
+.night .n-tl-more summary:hover {
+  color: var(--n-hi);
+}
+.night .n-tl-more summary .chev {
+  display: inline-block;
+  transform: rotate(90deg);
+}
+.night .n-tl-more summary:focus-visible {
+  outline: 2px solid var(--n-mid);
+  outline-offset: 4px;
+}
+.night .n-tl-more details[open] > summary {
+  display: none;
+}

package/dist/react/controls.d.ts

@@ -0,0 +1,20 @@
+import type { ElementType, ReactNode } from "react";
+import { type PolyProps } from "./util.js";
+type ControlProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/**
+ * 알약 버튼. 한 화면의 주 행동 하나에 쓴다. ghost 는 어두운 면(둘째 행동).
+ * 링크면 as 로 프레임워크의 링크 컴포넌트를, 단추면 as="button" 을 넘긴다.
+ */
+export declare function Pill<T extends ElementType = "a">({ as, ghost, className, ...rest }: PolyProps<T, ControlProps & {
+    ghost?: boolean;
+}>): import("react").JSX.Element;
+/** 글자 링크. 버튼 옆의 둘째 행동이나 본문 아래의 '더 보기'. arrow 를 주면 끝에 화살표가 붙는다. */
+export declare function TextLink<T extends ElementType = "a">({ as, arrow, className, children, ...rest }: PolyProps<T, ControlProps & {
+    arrow?: boolean;
+}>): import("react").JSX.Element;
+/** 버튼과 글자 링크를 나란히 놓는 줄. 버튼 하나와 링크 하나까지만 둔다. */
+export declare function Actions({ className, children }: ControlProps): import("react").JSX.Element;
+export {};

package/dist/react/controls.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./util.js";
+/**
+ * 알약 버튼. 한 화면의 주 행동 하나에 쓴다. ghost 는 어두운 면(둘째 행동).
+ * 링크면 as 로 프레임워크의 링크 컴포넌트를, 단추면 as="button" 을 넘긴다.
+ */
+export function Pill({ as, ghost, className, ...rest }) {
+    const Tag = as ?? "a";
+    return _jsx(Tag, { className: cx("n-pill", ghost && "ghost", className), ...rest });
+}
+/** 글자 링크. 버튼 옆의 둘째 행동이나 본문 아래의 '더 보기'. arrow 를 주면 끝에 화살표가 붙는다. */
+export function TextLink({ as, arrow, className, children, ...rest }) {
+    const Tag = as ?? "a";
+    return (_jsxs(Tag, { className: cx("n-link", className), ...rest, children: [children, arrow ? _jsx("span", { "aria-hidden": "true", children: "\u2192" }) : null] }));
+}
+/** 버튼과 글자 링크를 나란히 놓는 줄. 버튼 하나와 링크 하나까지만 둔다. */
+export function Actions({ className, children }) {
+    return _jsx("div", { className: cx("n-actions", className), children: children });
+}

package/dist/react/index.d.ts

@@ -0,0 +1,6 @@
+export { tone, titleText, hi } from "./tone.js";
+export { cx } from "./util.js";
+export type { PolyProps } from "./util.js";
+export { Display, Title, Body, CardTitle, Small } from "./type.js";
+export { Page, PageHead, Section, SectionHead, Rows, Row, Panel, Media, PhotoPanel, CtaBand } from "./layout.js";
+export { Pill, TextLink, Actions } from "./controls.js";

package/dist/react/index.js

@@ -0,0 +1,5 @@
+export { tone, titleText, hi } from "./tone.js";
+export { cx } from "./util.js";
+export { Display, Title, Body, CardTitle, Small } from "./type.js";
+export { Page, PageHead, Section, SectionHead, Rows, Row, Panel, Media, PhotoPanel, CtaBand } from "./layout.js";
+export { Pill, TextLink, Actions } from "./controls.js";

package/dist/react/layout.d.ts

@@ -0,0 +1,68 @@
+import type { ElementType, ReactNode } from "react";
+import { type PolyProps } from "./util.js";
+type BoxProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** 하위 페이지의 맨 바깥. 검은 바탕과 떠 있는 메뉴 자리(위 여백)를 준다. */
+export declare function Page<T extends ElementType = "div">({ as, className, ...rest }: PolyProps<T, BoxProps>): import("react").JSX.Element;
+/** 페이지 머리: 제목 한 줄, 받쳐 주는 문단 하나, 버튼 줄. */
+export declare function PageHead({ title, label, lead, actions, className, children, }: {
+    /** 페이지 제목. "**진한 낱말** 나머지" 꼴이면 두 톤으로 그린다 */
+    title: string;
+    label?: string;
+    lead?: ReactNode;
+    /** 버튼 하나와 글자 링크 하나까지 */
+    actions?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * 구간. 안쪽은 내용 폭(1064px)으로 감싼다. bare 를 주면 감싸지 않는다(화면 끝까지 쓰는 내용).
+ * rule 은 앞 구간과의 사이에 가는 선을 긋고, slim 은 문장 하나와 버튼 하나뿐인 짧은 구간의 여백을 준다.
+ */
+export declare function Section<T extends ElementType = "section">({ as, bare, rule, slim, className, children, ...rest }: PolyProps<T, BoxProps & {
+    bare?: boolean;
+    rule?: boolean;
+    slim?: boolean;
+}>): import("react").JSX.Element;
+/** 구간 머리: 왼쪽에 한 줄 제목, 오른쪽에 본문(children). 본문이 없으면 제목이 한 줄 전체를 쓴다. */
+export declare function SectionHead({ title, label, rule, as, className, children, }: {
+    title: string;
+    label?: string;
+    /** 위에 가는 선을 긋고 그 아래에서 시작한다 */
+    rule?: boolean;
+    as?: "h1" | "h2" | "h3";
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** 줄 목록의 바깥. 순서가 있으면 as="ol". */
+export declare function Rows<T extends ElementType = "div">({ as, className, ...rest }: PolyProps<T, BoxProps>): import("react").JSX.Element;
+/** 한 줄: 왼쪽 작은 라벨, 오른쪽 본문. 글만 넘기면 본문 문단으로 그린다. */
+export declare function Row<T extends ElementType = "div">({ as, label, labelAs, wide, className, children, ...rest }: PolyProps<T, BoxProps & {
+    label: ReactNode;
+    labelAs?: "h3" | "h4" | "p" | "dt";
+    wide?: boolean;
+}>): import("react").JSX.Element;
+/** 검은 판. 화면 양옆에서 한 칸 들어온 둥근 면으로 구간 하나를 감싼다. */
+export declare function Panel<T extends ElementType = "section">({ as, className, children, ...rest }: PolyProps<T, BoxProps>): import("react").JSX.Element;
+/** 그림과 영상의 틀. 기본 4:3, wide 는 16:9. 안의 img, video 는 틀을 채운다. */
+export declare function Media<T extends ElementType = "div">({ as, wide, className, ...rest }: PolyProps<T, BoxProps & {
+    wide?: boolean;
+}>): import("react").JSX.Element;
+/**
+ * 사진 판. 어둡게 누른 사진 위 왼쪽 아래에 제목과 문단을 둔다. media 에 img 나 video(프레임워크의 이미지 컴포넌트)를 넘긴다.
+ * 한 페이지에 하나, 밝은 곳이 필요한 자리에 쓴다.
+ */
+export declare function PhotoPanel<T extends ElementType = "div">({ as, media, className, children, ...rest }: PolyProps<T, BoxProps & {
+    media?: ReactNode;
+}>): import("react").JSX.Element;
+/** 문의 띠: 왼쪽 한 줄 문장(과 짧은 문단), 오른쪽 버튼 줄. 페이지 끝에 하나 둔다. */
+export declare function CtaBand({ title, label, body, actions, className, }: {
+    title: string;
+    label?: string;
+    body?: ReactNode;
+    actions: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};