kwon-ui 0.0.0-stage → 0.1.0

package/dist/kwon-ui.css

@@ -0,0 +1,438 @@
+/* kwon-ui 0.1.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);
+
+  /* 글자 크기. 읽는 글은 제목, 본문, 작은 글 셋이다. 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 .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-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;
+  padding: 24px 0;
+  border-bottom: 1px solid var(--n-line);
+}
+@media (min-width: 768px) {
+  .night .n-row {
+    grid-template-columns: 200px 1fr;
+    padding: 28px 0;
+  }
+  .night .n-row.wide-label {
+    grid-template-columns: 280px 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;
+}
+
+/* 문의 띠: 왼쪽 문장, 오른쪽 버튼 */
+.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);
+  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 } 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, CtaBand } from "./layout.js";
+export { Pill, TextLink, Actions } from "./controls.js";

package/dist/react/index.js

@@ -0,0 +1,5 @@
+export { tone, titleText } 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, CtaBand } from "./layout.js";
+export { Pill, TextLink, Actions } from "./controls.js";

package/dist/react/layout.d.ts

@@ -0,0 +1,56 @@
+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 를 주면 감싸지 않는다(화면 끝까지 쓰는 내용). */
+export declare function Section<T extends ElementType = "section">({ as, bare, className, children, ...rest }: PolyProps<T, BoxProps & {
+    bare?: 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;
+/** 문의 띠: 왼쪽 한 줄 문장(과 짧은 문단), 오른쪽 버튼 줄. 페이지 끝에 하나 둔다. */
+export declare function CtaBand({ title, label, body, actions, className, }: {
+    title: string;
+    label?: string;
+    body?: ReactNode;
+    actions: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/react/layout.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { titleText } from "./tone.js";
+import { cx } from "./util.js";
+/** 하위 페이지의 맨 바깥. 검은 바탕과 떠 있는 메뉴 자리(위 여백)를 준다. */
+export function Page({ as, className, ...rest }) {
+    const Tag = as ?? "div";
+    return _jsx(Tag, { className: cx("night n-page", className), ...rest });
+}
+/** 페이지 머리: 제목 한 줄, 받쳐 주는 문단 하나, 버튼 줄. */
+export function PageHead({ title, label, lead, actions, className, children, }) {
+    return (_jsxs("header", { className: cx("n-wrap n-page-head", className), children: [_jsxs("div", { className: "n-head", children: [_jsx("h1", { className: "n-title", children: titleText(title, label) }), lead ? _jsx("p", { className: "n-body", children: lead }) : null] }), actions ? _jsx("div", { className: "n-actions", children: actions }) : null, children] }));
+}
+/** 구간. 안쪽은 내용 폭(1064px)으로 감싼다. bare 를 주면 감싸지 않는다(화면 끝까지 쓰는 내용). */
+export function Section({ as, bare, className, children, ...rest }) {
+    const Tag = as ?? "section";
+    return (_jsx(Tag, { className: cx("n-sect", className), ...rest, children: bare ? children : _jsx("div", { className: "n-wrap", children: children }) }));
+}
+/** 구간 머리: 왼쪽에 한 줄 제목, 오른쪽에 본문(children). 본문이 없으면 제목이 한 줄 전체를 쓴다. */
+export function SectionHead({ title, label, rule, as, className, children, }) {
+    const H = as ?? "h2";
+    return (_jsxs("div", { className: cx("n-head", rule && "ruled", className), children: [_jsx(H, { className: "n-title", children: titleText(title, label) }), children ? _jsx("div", { children: typeof children === "string" ? _jsx("p", { className: "n-body", children: children }) : children }) : null] }));
+}
+/** 줄 목록의 바깥. 순서가 있으면 as="ol". */
+export function Rows({ as, className, ...rest }) {
+    const Tag = as ?? "div";
+    return _jsx(Tag, { className: cx("n-rows", className), ...rest });
+}
+/** 한 줄: 왼쪽 작은 라벨, 오른쪽 본문. 글만 넘기면 본문 문단으로 그린다. */
+export function Row({ as, label, labelAs, wide, className, children, ...rest }) {
+    const Tag = as ?? "div";
+    const L = labelAs ?? "h3";
+    return (_jsxs(Tag, { className: cx("n-row", wide && "wide-label", className), ...rest, children: [_jsx(L, { className: "n-row-label", children: label }), typeof children === "string" ? _jsx("p", { className: "n-body", children: children }) : children] }));
+}
+/** 검은 판. 화면 양옆에서 한 칸 들어온 둥근 면으로 구간 하나를 감싼다. */
+export function Panel({ as, className, children, ...rest }) {
+    const Tag = as ?? "section";
+    return (_jsx(Tag, { className: cx("n-panel", className), ...rest, children: _jsx("div", { className: "n-wrap", children: children }) }));
+}
+/** 그림과 영상의 틀. 기본 4:3, wide 는 16:9. 안의 img, video 는 틀을 채운다. */
+export function Media({ as, wide, className, ...rest }) {
+    const Tag = as ?? "div";
+    return _jsx(Tag, { className: cx("n-media", wide && "wide", className), ...rest });
+}
+/** 문의 띠: 왼쪽 한 줄 문장(과 짧은 문단), 오른쪽 버튼 줄. 페이지 끝에 하나 둔다. */
+export function CtaBand({ title, label, body, actions, className, }) {
+    const heading = _jsx("h2", { className: "n-title", children: titleText(title, label) });
+    return (_jsxs("div", { className: cx("n-cta-band", className), children: [body ? (_jsxs("div", { children: [heading, _jsx("p", { className: "n-body", children: body })] })) : (heading), _jsx("div", { className: "n-actions", children: actions })] }));
+}

package/dist/react/tone.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+/**
+ * 한 줄 두 톤 제목. 글은 "**진한 낱말** 나머지" 꼴로 쓴다.
+ * ** 로 감싼 곳만 진한 글자(제목 기본색)이고, 나머지는 같은 줄의 회색(.lo-inline)이다.
+ * 진한 글자는 문장의 핵심 낱말 한두 개에만 준다. 숫자는 숫자가 요점일 때만 진하게 둔다.
+ * label 을 주면 화면 낭독기만 읽는 구간 이름을 앞에 붙인다(보이는 문장에 구간 이름이 없을 때).
+ */
+export declare function tone(line: string, label?: string): ReactNode;
+/**
+ * 제목 글. ** 표시가 있으면 두 톤으로, 없으면 전부 진한 글자로 그린다.
+ * (tone 은 표시가 없는 글을 전부 회색으로 그리므로, 표시 없는 제목은 이 함수를 거친다.)
+ */
+export declare function titleText(line: string, label?: string): ReactNode;

package/dist/react/tone.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "react";
+/**
+ * 한 줄 두 톤 제목. 글은 "**진한 낱말** 나머지" 꼴로 쓴다.
+ * ** 로 감싼 곳만 진한 글자(제목 기본색)이고, 나머지는 같은 줄의 회색(.lo-inline)이다.
+ * 진한 글자는 문장의 핵심 낱말 한두 개에만 준다. 숫자는 숫자가 요점일 때만 진하게 둔다.
+ * label 을 주면 화면 낭독기만 읽는 구간 이름을 앞에 붙인다(보이는 문장에 구간 이름이 없을 때).
+ */
+export function tone(line, label) {
+    const parts = line.split(/(\*\*[^*]+\*\*)/).filter(Boolean);
+    return (_jsxs(_Fragment, { children: [label ? _jsxs("span", { className: "n-sr", children: [label, ". "] }) : null, parts.map((p, i) => p.startsWith("**") && p.endsWith("**") ? (_jsx(Fragment, { children: p.slice(2, -2) }, i)) : (_jsx("span", { className: "lo-inline", children: p }, i)))] }));
+}
+/**
+ * 제목 글. ** 표시가 있으면 두 톤으로, 없으면 전부 진한 글자로 그린다.
+ * (tone 은 표시가 없는 글을 전부 회색으로 그리므로, 표시 없는 제목은 이 함수를 거친다.)
+ */
+export function titleText(line, label) {
+    if (line.includes("**"))
+        return tone(line, label);
+    return (_jsxs(_Fragment, { children: [label ? _jsxs("span", { className: "n-sr", children: [label, ". "] }) : null, line] }));
+}

package/dist/react/type.d.ts

@@ -0,0 +1,27 @@
+import type { ElementType, ReactNode } from "react";
+import { type PolyProps } from "./util.js";
+type LineProps = {
+    /** "**진한 낱말** 나머지" 꼴의 한 줄. children 대신 쓴다 */
+    line?: string;
+    /** 화면 낭독기만 읽는 구간 이름 */
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+};
+/** 첫 화면 제목. 한 페이지에 한 번만 쓴다. */
+export declare function Display<T extends ElementType = "h1">({ as, line, label, className, children, ...rest }: PolyProps<T, LineProps>): import("react").JSX.Element;
+/** 구간 제목. 한 문장 한 줄로 쓰고 진한 글자는 핵심 낱말 한두 개에만 준다. */
+export declare function Title<T extends ElementType = "h2">({ as, line, label, className, children, ...rest }: PolyProps<T, LineProps>): import("react").JSX.Element;
+type TextProps = {
+    className?: string;
+    children?: ReactNode;
+};
+/** 본문. */
+export declare function Body<T extends ElementType = "p">({ as, className, ...rest }: PolyProps<T, TextProps>): import("react").JSX.Element;
+/** 목록이나 카드 안의 작은 제목. 본문과 같은 크기이고 진한 글자다. */
+export declare function CardTitle<T extends ElementType = "h3">({ as, className, ...rest }: PolyProps<T, TextProps>): import("react").JSX.Element;
+/** 작은 글: 캡션, 기준, 라벨. num 을 주면 숫자 폭을 맞춘다. */
+export declare function Small<T extends ElementType = "p">({ as, num, className, ...rest }: PolyProps<T, TextProps & {
+    num?: boolean;
+}>): import("react").JSX.Element;
+export {};