sellmate-design-system-react 9.0.0-beta.52 → 9.0.0-beta.53

package/AGENTS.md

@@ -2337,6 +2337,9 @@ export default function ProductDetailPage() {
     description="(사내 답변은 사내 문서를 기반으로 답변합니다.)"
     onLogin={signIn}
     footerNote="계정이 없다면 담당자에게 문의를 요청해 주세요."
+    bottomAction={
+      <STextLink label="관리자 로그인" icon="settingOutline" rightArrow="chevron" onClick={goAdmin} />
+    }
   />
 </div>
 ```
@@ -2354,8 +2357,11 @@ export default function ProductDetailPage() {
 | `description` | 소개 바로 아래 붙는 보조 설명. 소개와 한 문단으로 읽힌다 — 없으면 생략한다 |
 | `onLogin` | 로그인 버튼을 눌렀을 때. **버튼은 카드가 그리므로 동작만 넘긴다** — 문구·색·크기는 세 제품에서 같아야 한다 |
 | `footerNote` | 버튼 아래 안내 문구 |
+| `bottomAction` | 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). `STextLink` 하나만 넣는다 — 없으면 생략한다 |
+
+**`bottomAction` 은 로그인과 성격이 다른 진입점만 받는다.** 관리자 로그인처럼 "이 화면의 주인공은 아니지만 여기서만 갈 수 있는 곳"이 그 자리다. 카드가 바닥에 붙여 세우고, 가운데 덩어리는 그만큼 밀리지 않고 한가운데에 그대로 선다. **버튼을 세우지 않는다** — 로그인 버튼과 무게가 같아지는 순간 「이 화면에서 눌러야 하는 것」이 흐려진다. 읽을 문장은 여기가 아니라 `description`·`footerNote` 로 간다.
 
-**문구 말고는 주지 않는다.** 라운드·간격·타이포·버튼 색은 카드가 쥐고 있어 제품이 달라도 같은 화면이 선다.
+**문구와 `bottomAction` 말고는 주지 않는다.** 라운드·간격·타이포·버튼 색은 카드가 쥐고 있어 제품이 달라도 같은 화면이 선다.
 
 **크기는 부모가 정한다 — `className` 으로 폭을 박지 않는다.** 카드는 폭을 368~640px 사이에서 부모에 맞추고 높이도 부모가 준 만큼 채운다. 밖에서 고정하면 상하한이 무의미해져, 좁은 화면에서 함께 좁아져야 할 카드가 그대로 남아 넘친다. 좁게 세워야 하면 카드가 아니라 바깥 한 겹을 좁힌다.
 

package/dist/components/SIcon/icons.gen.d.ts

@@ -44,6 +44,7 @@ export declare const ICONS: {
     readonly clockOutline: (p: IconRenderProps) => import("react").JSX.Element;
     readonly close: (p: IconRenderProps) => import("react").JSX.Element;
     readonly company: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly connect: (p: IconRenderProps) => import("react").JSX.Element;
     readonly copy: (p: IconRenderProps) => import("react").JSX.Element;
     readonly counsel: (p: IconRenderProps) => import("react").JSX.Element;
     readonly coupon: (p: IconRenderProps) => import("react").JSX.Element;
@@ -69,6 +70,9 @@ export declare const ICONS: {
     readonly link: (p: IconRenderProps) => import("react").JSX.Element;
     readonly location: (p: IconRenderProps) => import("react").JSX.Element;
     readonly logout: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly megaphone: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageClose: (p: IconRenderProps) => import("react").JSX.Element;
+    readonly messageOpen: (p: IconRenderProps) => import("react").JSX.Element;
     readonly minus: (p: IconRenderProps) => import("react").JSX.Element;
     readonly monitor: (p: IconRenderProps) => import("react").JSX.Element;
     readonly new: (p: IconRenderProps) => import("react").JSX.Element;

package/dist/components/SLoginCard/README.md

@@ -12,6 +12,7 @@
 | `title` | `ReactNode` | — | 제품을 한 줄로 소개하는 문장 |
 | `description?` | `ReactNode` | — | 소개 문장 바로 아래 붙는 보조 설명. 소개와 한 덩어리로 읽힌다 |
 | `footerNote?` | `ReactNode` | — | 버튼 아래 안내 문구 (예: 계정 발급 문의 안내) |
+| `bottomAction?` | `ReactNode` | — | 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). 가운데 덩어리와 섞이지 않도록 바닥에 붙고, 위 덩어리는 카드 한가운데에 그대로 선다. `STextLink` 하나만 넣는다 — 이 자리는 "이 화면에서 할 일은 로그인 하나"라는 뜻을 깨지 않을 만큼만 작아야 해서, 버튼이나 문단이 서는 자리가 아니다. |
 
 #### Events
 

package/dist/components/SLoginCard/SLoginCard.d.ts

@@ -13,6 +13,14 @@ export interface SLoginCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     onLogin?: () => void;
     /** 버튼 아래 안내 문구 (예: 계정 발급 문의 안내) */
     footerNote?: ReactNode;
+    /**
+     * 카드 **맨 아래**에 서는 보조 진입점 (예: 관리자 로그인). 가운데 덩어리와 섞이지 않도록
+     * 바닥에 붙고, 위 덩어리는 카드 한가운데에 그대로 선다.
+     *
+     * `STextLink` 하나만 넣는다 — 이 자리는 "이 화면에서 할 일은 로그인 하나"라는 뜻을 깨지 않을
+     * 만큼만 작아야 해서, 버튼이나 문단이 서는 자리가 아니다.
+     */
+    bottomAction?: ReactNode;
 }
 /**
  * SLoginCard — 통합 계정 로그인 화면의 카드.
@@ -22,6 +30,9 @@ export interface SLoginCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
  *
  * **크기는 부모가 정한다** — 폭은 368~640px 사이에서 부모를 채우고, 높이도 부모가 준 만큼 채운다.
  *
+ * 관리자 로그인 같은 보조 진입점은 `bottomAction` 으로 카드 바닥에 세운다 — 가운데 덩어리는
+ * 그만큼 밀리지 않고 카드 한가운데에 그대로 선다.
+ *
  * **카드는 화면을 잡지 않는다** — 회색 바탕과 가운데 정렬은 앱이 만드는 한 겹이다 (AGENTS.md §4-6).
  * 덕분에 로그인 화면 밖(세션 만료 재인증 등)에서도 같은 카드를 그대로 쓸 수 있다.
  */

package/dist/index.cjs

@@ -1359,6 +1359,27 @@ var Icon_company = (p) => {
     }
   );
 };
+var Icon_connect = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M10.0479 10.0479C10.3407 9.75512 10.8155 9.7551 11.1084 10.0479C11.4011 10.3407 11.4011 10.8156 11.1084 11.1084L9.50391 12.7129L11.29 14.499L12.8945 12.8945C13.1874 12.6018 13.6622 12.6018 13.9551 12.8945C14.2477 13.1874 14.2478 13.6623 13.9551 13.9551L12.3506 15.5596L13.9551 17.1641C14.2476 17.4569 14.2477 17.9318 13.9551 18.2246C13.6623 18.5174 13.1874 18.5172 12.8945 18.2246L12.3574 17.6875L10.3076 19.7373C9.7666 20.2782 9.03263 20.582 8.26758 20.582C7.50255 20.582 6.76852 20.2782 6.22754 19.7373V19.7363L5.77734 19.2852L3.28027 21.7832C2.98743 22.0758 2.51257 22.0758 2.21973 21.7832C1.92701 21.4904 1.92707 21.0155 2.21973 20.7227L4.7168 18.2246L4.26465 17.7715C3.72491 17.2306 3.42188 16.4975 3.42188 15.7334C3.42191 14.9693 3.72487 14.2362 4.26465 13.6953H4.26562L6.31543 11.6455L5.77832 11.1084C5.48543 10.8155 5.48543 10.3407 5.77832 10.0479C6.07123 9.75518 6.54605 9.75503 6.83887 10.0479L8.44336 11.6523L10.0479 10.0479ZM20.7227 2.21973C21.0156 1.92704 21.4904 1.92693 21.7832 2.21973C22.0758 2.51257 22.0758 2.98743 21.7832 3.28027L19.2852 5.77734L19.7363 6.22754H19.7373C20.2782 6.76852 20.582 7.50255 20.582 8.26758C20.582 9.03263 20.2782 9.7666 19.7373 10.3076L17.6875 12.3564L18.2246 12.8936C18.5174 13.1864 18.5172 13.6612 18.2246 13.9541C17.9317 14.247 17.457 14.247 17.1641 13.9541L16.1035 12.8936C16.1014 12.8915 16.0988 12.8898 16.0967 12.8877C16.0936 12.8846 16.0909 12.8811 16.0879 12.8779L10.0479 6.83789C9.75512 6.54498 9.75501 6.07018 10.0479 5.77734C10.3407 5.48478 10.8156 5.4847 11.1084 5.77734L11.6455 6.31445L13.6953 4.26562V4.26465C14.2362 3.72487 14.9693 3.42191 15.7334 3.42188C16.4975 3.42188 17.2306 3.72491 17.7715 4.26465L18.2246 4.7168L20.7227 2.21973ZM15.7334 4.92188C15.3669 4.92191 15.0145 5.06643 14.7549 5.3252L12.7109 7.37012L16.6738 11.249L18.6768 9.24707L18.7686 9.14551C18.9704 8.89907 19.082 8.58895 19.082 8.26758C19.082 7.90036 18.9364 7.54776 18.6768 7.28809V7.28906L17.7334 6.34668C17.7197 6.33485 17.7054 6.32352 17.6924 6.31055C17.6794 6.29755 17.6681 6.28321 17.6562 6.26953L16.7119 5.32617C16.4523 5.06714 16.1002 4.92188 15.7334 4.92188Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_copy = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2202,6 +2223,73 @@ var Icon_logout = (p) => {
     }
   );
 };
+var Icon_megaphone = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M14.1377 2.53809C14.6776 2.4021 15.2398 2.64257 15.5059 3.13672C15.5678 3.25197 15.6001 3.36562 15.6192 3.44336C15.6384 3.522 15.6567 3.61745 15.6748 3.70996L16.1572 6.16895C16.6323 6.15224 17.1776 6.21084 17.7012 6.41016C18.5759 6.74337 19.3623 7.46753 19.6172 8.76563C19.8719 10.0639 19.424 11.0644 18.7481 11.7441C18.3435 12.1508 17.8652 12.4359 17.4238 12.624L17.8115 14.5947C17.8297 14.6872 17.8484 14.7821 17.8604 14.8623C17.8722 14.9417 17.8855 15.0591 17.8721 15.1914C17.8105 15.7956 17.3322 16.2792 16.7344 16.3418C16.6033 16.3555 16.4859 16.342 16.4072 16.3301C16.3279 16.318 16.2341 16.2986 16.1426 16.2803L11.7373 15.3984L12.3281 19.1104C12.3373 19.1681 12.3561 19.2771 12.3565 19.3887C12.3573 19.6959 12.2471 19.9962 12.0459 20.2314C11.9727 20.317 11.8867 20.3891 11.8418 20.4277L11.0938 21.0703C11.006 21.146 10.8482 21.2924 10.6729 21.377C10.1877 21.6108 9.61522 21.5089 9.25099 21.125C9.11989 20.9865 9.02792 20.7979 8.97462 20.6973L6.55177 16.1279C4.47722 16.3063 2.57689 14.9153 2.1631 12.8086L2.0879 12.4268C1.59605 9.91982 3.21872 7.43627 5.71192 6.87891L9.0381 6.13575L13.5127 2.87989C13.5897 2.8239 13.6681 2.76577 13.7363 2.72071C13.8038 2.67613 13.9053 2.61291 14.0303 2.56934L14.1377 2.53809ZM8.09962 15.8232L10.2354 19.8525L10.8457 19.3262L10.2139 15.3506L8.09962 15.8232ZM10.1621 7.15332L11.4668 13.7988L16.3184 14.7715L14.2402 4.18653L10.1621 7.15332ZM6.00099 8.35059C4.31626 8.72727 3.21948 10.4056 3.55177 12.0996L3.62696 12.4814C3.91846 13.965 5.35155 14.9011 6.82716 14.5713L9.95314 13.8721L8.74806 7.73633L6.00099 8.35059ZM17.1279 11.1123C17.3325 11.0011 17.5367 10.8617 17.709 10.6885C18.0592 10.3363 18.3008 9.84441 18.1533 9.09278C18.0057 8.34145 17.5996 7.99493 17.1465 7.82227C16.9233 7.73729 16.6836 7.69489 16.4541 7.68067L17.1279 11.1123ZM18.6777 5.22266C18.805 4.83025 19.2244 4.62494 19.6152 4.76367C21.4693 5.42335 22.0009 7.35043 22.001 8.48926C22.0008 8.90597 21.667 9.23456 21.2559 9.22364C20.8448 9.21236 20.5109 8.8659 20.5108 8.44922C20.5107 7.64608 20.1558 6.659 19.3281 6.25977L19.085 6.15723C18.7394 5.99375 18.5588 5.59129 18.6777 5.22266Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+var Icon_messageClose = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M18.751 5C19.0713 5.00009 19.3755 5.0687 19.6514 5.18945C19.6918 5.20641 19.7324 5.22472 19.7725 5.24512C19.7844 5.25121 19.7958 5.25835 19.8076 5.26465C19.8228 5.27275 19.8376 5.2816 19.8525 5.29004C19.8942 5.31344 19.9347 5.33836 19.9746 5.36426C19.9945 5.37722 20.0147 5.38975 20.0342 5.40332C20.0738 5.43083 20.1118 5.46031 20.1494 5.49023C20.1641 5.50192 20.179 5.51334 20.1934 5.52539C20.2953 5.61067 20.3893 5.70475 20.4746 5.80664C20.4867 5.82102 20.4981 5.8359 20.5098 5.85059C20.5397 5.88822 20.5691 5.92625 20.5967 5.96582C20.6109 5.98626 20.6241 6.00739 20.6377 6.02832C20.6593 6.06166 20.6803 6.09534 20.7002 6.12988C20.7144 6.1545 20.7289 6.17891 20.7422 6.2041C20.7465 6.21235 20.7516 6.22021 20.7559 6.22852C20.7739 6.26403 20.7903 6.30009 20.8057 6.33594C20.9302 6.61536 21.0009 6.92436 21.001 7.25V16.75C21.001 17.9924 19.9933 18.9997 18.751 19H5.25C4.00736 19 3 17.9926 3 16.75V7.25C3.00006 6.92934 3.06753 6.62467 3.18848 6.34863C3.20535 6.30844 3.22485 6.2683 3.24512 6.22852C3.24929 6.22034 3.25355 6.21222 3.25781 6.2041C3.27217 6.17683 3.28828 6.15062 3.30371 6.12402C3.32072 6.09463 3.33817 6.06563 3.35645 6.03711C3.37247 6.01216 3.3883 5.98715 3.40527 5.96289C3.43208 5.9245 3.46018 5.88716 3.48926 5.85059C3.50095 5.8359 3.51237 5.82102 3.52441 5.80664C3.60969 5.70475 3.70378 5.61068 3.80566 5.52539C3.82004 5.51334 3.83493 5.50193 3.84961 5.49023C3.88724 5.4603 3.92528 5.43084 3.96484 5.40332C3.98432 5.38975 4.0045 5.37722 4.02441 5.36426C4.06234 5.33962 4.10114 5.31633 4.14062 5.29395C4.15975 5.28308 4.17877 5.27204 4.19824 5.26172C4.20825 5.25642 4.21841 5.25027 4.22852 5.24512C4.26515 5.22647 4.30189 5.20912 4.33887 5.19336C4.6174 5.06986 4.92569 5 5.25 5H18.751ZM5.67285 17.5H18.3262L13.6699 14.2432C13.2966 14.4706 12.9697 14.6447 12.6152 14.7256C12.2136 14.8171 11.7962 14.8169 11.3945 14.7256C11.0377 14.6444 10.7084 14.4696 10.332 14.2402L5.67285 17.5ZM15.0508 13.3789L19.501 16.4902V10.5898L15.0508 13.3789ZM4.5 16.4893L8.95117 13.376L4.5 10.5898V16.4893ZM6.15039 6.5C5.71825 6.5 5.43804 6.50025 5.22559 6.51758C5.0509 6.53187 4.97051 6.55693 4.92773 6.5752C4.90378 6.58664 4.88087 6.59945 4.8584 6.61328C4.75648 6.67586 4.67128 6.7609 4.60938 6.86328C4.59729 6.88322 4.58639 6.90371 4.57617 6.9248C4.5577 6.96653 4.5323 7.04591 4.51758 7.22559C4.50022 7.43802 4.5 7.71821 4.5 8.15039V8.81934L10.7041 12.7051C11.3668 13.12 11.5506 13.2225 11.7275 13.2627C11.9101 13.3041 12.0997 13.3043 12.2822 13.2627C12.459 13.2223 12.6434 13.1192 13.3057 12.7041L19.501 8.82031V8.15039C19.501 7.71821 19.4998 7.43802 19.4824 7.22559C19.4683 7.05368 19.4437 6.97387 19.4258 6.93066C19.4134 6.90466 19.3999 6.87972 19.3848 6.85547C19.3229 6.75623 19.2396 6.67322 19.1396 6.6123C19.1181 6.59915 19.0961 6.58715 19.0732 6.57617C19.0309 6.5578 18.9512 6.53205 18.7744 6.51758C18.6682 6.50892 18.5449 6.50516 18.3945 6.50293L17.8506 6.5H6.15039Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
+var Icon_messageOpen = (p) => {
+  const { size = 24, ...rest } = p;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M10.8633 3.72857C11.5655 3.31747 12.4355 3.31726 13.1377 3.72857L19.8877 7.68365C20.5767 8.08741 21.0009 8.82646 21.001 9.62505V18.251C21.0009 19.4934 19.9933 20.5007 18.751 20.501H5.25C4.00739 20.501 3.00006 19.4936 3 18.251V9.62505C3.00006 8.82647 3.42332 8.08741 4.1123 7.68365L10.8633 3.72857ZM10.8691 15.2286L5.75488 19.001H18.2451L13.1299 15.2286H10.8691ZM14.5469 14.4092L19.501 18.0635V10.0557L14.5469 14.4092ZM4.5 18.0626L9.45215 14.4092L4.5 10.0577V18.0626ZM12.3799 5.02349C12.1459 4.88638 11.8552 4.88652 11.6211 5.02349L5.27441 8.74126L10.9502 13.7286H13.0498L18.7246 8.74029L12.3799 5.02349Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+};
 var Icon_minus = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3378,6 +3466,7 @@ var ICONS = {
   clockOutline: Icon_clockOutline,
   close: Icon_close,
   company: Icon_company,
+  connect: Icon_connect,
   copy: Icon_copy,
   counsel: Icon_counsel,
   coupon: Icon_coupon,
@@ -3403,6 +3492,9 @@ var ICONS = {
   link: Icon_link,
   location: Icon_location,
   logout: Icon_logout,
+  megaphone: Icon_megaphone,
+  messageClose: Icon_messageClose,
+  messageOpen: Icon_messageOpen,
   minus: Icon_minus,
   monitor: Icon_monitor,
   new: Icon_new,
@@ -6444,7 +6536,7 @@ function SellmateWordmark({ className }) {
   );
 }
 var BUTTON_LABEL = "\uD1B5\uD569 \uACC4\uC815\uC73C\uB85C \uB85C\uADF8\uC778";
-var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ product, title, description, onLogin, footerNote, className, ...rest }, ref) {
+var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ product, title, description, onLogin, footerNote, bottomAction, className, ...rest }, ref) {
   const hasIntro = title != null || description != null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -6456,7 +6548,7 @@ var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ prod
         // 내려가면 버튼(320px)이 안쪽 여백을 밀어낸다. 그 사이에서는 부모를 그대로 따른다.
         // 부모가 높이를 주지 않으면 h-full 이 auto 로 풀려 카드가 내용 높이로 줄어든다 —
         // 로그인 화면 밖(모달·스토리)에서도 그대로 쓸 수 있는 이유다.
-        "flex h-full w-full max-w-[640px] min-w-[368px] shrink-0 flex-col items-center justify-center gap-sd-60",
+        "flex h-full w-full max-w-[640px] min-w-[368px] shrink-0 flex-col items-center justify-center",
         // 라운드 24px·폭 상하한(640/368px)은 대응 토큰이 없어 값으로 둔다 (디자인팀 토큰 추가 요청 대상).
         "rounded-[24px] bg-(--sys-color-bg-frame) p-sd-16 text-center",
         // 한글은 기본 규칙으로 두면 어절 한가운데서도 줄이 바뀐다 — `break-keep` 으로 띄어쓰기에서만
@@ -6466,34 +6558,40 @@ var SLoginCardImpl = /* @__PURE__ */ react.forwardRef(function SLoginCard({ prod
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-32", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SellmateWordmark, {}),
-            product != null && // 24px 는 typo 프리셋(최대 18px)에 없는 등급이다 — 제품명은 로고의 일부처럼 읽혀야
-            // 해서 본문 스케일 위에 선다. 여기만 값으로 두고, 프리셋이 생기면 갈아탄다.
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[24px] leading-[28px] font-bold text-(--sys-color-fg-accentLight)", children: product })
+        bottomAction != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full flex-col items-center gap-sd-60", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-32", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SellmateWordmark, {}),
+              product != null && // 24px 는 typo 프리셋(최대 18px)에 없는 등급이다 — 제품명은 로고의 일부처럼 읽혀야
+              // 해서 본문 스케일 위에 선다. 여기만 값으로 두고, 프리셋이 생기면 갈아탄다.
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "m-0 text-[24px] leading-[28px] font-bold text-(--sys-color-fg-accentLight)", children: product })
+            ] }),
+            hasIntro && // 소개와 보조 설명은 한 문단으로 읽힌다.
+            // `text-balance` 는 상속되므로 여기 한 번만 걸어 둘을 함께 덮는다 — 가운데 정렬에서는
+            // 마지막 줄에 한 어절만 남는 모양이 가장 눈에 띄어서, 줄 길이를 고르게 나눠야 한다.
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-4 text-balance", children: [
+              title != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-lg-medium m-0 text-(--sys-color-fg-secondary)", children: title }),
+              description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-md-default m-0 text-(--sys-color-fg-tertiary)", children: description })
+            ] })
           ] }),
-          hasIntro && // 소개와 보조 설명은 한 문단으로 읽힌다.
-          // `text-balance` 는 상속되므로 여기 한 번만 걸어 둘을 함께 덮는다 — 가운데 정렬에서는
-          // 마지막 줄에 한 어절만 남는 모양이 가장 눈에 띄어서, 줄 길이를 고르게 나눠야 한다.
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-4 text-balance", children: [
-            title != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-lg-medium m-0 text-(--sys-color-fg-secondary)", children: title }),
-            description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-md-default m-0 text-(--sys-color-fg-tertiary)", children: description })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-12", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SButton,
+              {
+                color: "secondary",
+                size: "lg",
+                label: BUTTON_LABEL,
+                onClick: onLogin,
+                className: "w-[320px]"
+              }
+            ),
+            footerNote != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-sm-default m-0 text-(--sys-color-fg-tertiary)", children: footerNote })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-sd-12", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SButton,
-            {
-              color: "secondary",
-              size: "lg",
-              label: BUTTON_LABEL,
-              onClick: onLogin,
-              className: "w-[320px]"
-            }
-          ),
-          footerNote != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "typo-body-sm-default m-0 text-(--sys-color-fg-tertiary)", children: footerNote })
-        ] })
+        bottomAction != null && // 바닥에 붙는다 — 위 덩어리와 섞이지 않도록 남는 높이를 이 칸이 다 먹고 링크만 끝에 세운다.
+        // 부모가 높이를 주지 않아 칸이 접히면 pt 가 최소 간격으로 남는다.
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-end justify-center pt-sd-60", children: bottomAction })
       ]
     }
   );
@@ -18454,13 +18552,13 @@ function useSvgTextMetrics() {
   return { ref, metrics };
 }
 var DOT_SIZE2 = 6;
-var ANCHOR_GAP_X = 4;
+var DEFAULT_GAP_X = { after: 4, before: 4 };
 var ANCHOR_GAP_Y = 0;
-function placeX(anchor, size, extent) {
-  const after = anchor.right + ANCHOR_GAP_X;
+function placeX(anchor, size, extent, gap) {
+  const after = anchor.right + gap.after;
   if (!extent) return after;
   if (after + size <= extent) return after;
-  const before = anchor.left - ANCHOR_GAP_X - size;
+  const before = anchor.left - gap.before - size;
   if (before >= 0) return before;
   return Math.max(0, Math.min(after, extent - size));
 }
@@ -18469,7 +18567,14 @@ function placeY(anchor, size, extent) {
   if (!extent) return top;
   return Math.max(0, Math.min(top, extent - size));
 }
-function ChartTooltip({ title, items, anchor, bounds, className }) {
+function ChartTooltip({
+  title,
+  items,
+  anchor,
+  bounds,
+  gapX = DEFAULT_GAP_X,
+  className
+}) {
   const { ref, size } = useElementSize();
   const measured = size.width > 0 && size.height > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -18491,7 +18596,7 @@ function ChartTooltip({ title, items, anchor, bounds, className }) {
         // 크기를 재기 전에는 원점에 숨겨 둔다. 막대 옆에 그려 두면 그림 밖으로
         // 넘쳐 스크롤 영역이 잠깐 늘어나고, 차트 전체가 한 번 흔들린다.
         // transform 도 스크롤 영역 계산에는 포함되므로 위치만 바꿔서는 못 막는다.
-        transform: measured ? `translate(${placeX(anchor, size.width, bounds?.width ?? 0)}px, ${placeY(
+        transform: measured ? `translate(${placeX(anchor, size.width, bounds?.width ?? 0, gapX)}px, ${placeY(
           anchor,
           size.height,
           bounds?.height ?? 0
@@ -18666,11 +18771,12 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
   });
   const anchorBar = react.useMemo(() => {
     if (hoveredCategory == null || size.width <= 0 || size.height <= 0) return null;
+    const bandStart = layout.offset + hoveredCategory * layout.band;
     const pxOf = (value) => vertical ? size.height - ratioOf(value, scale) * size.height : ratioOf(value, scale) * size.width;
-    const anchorOf = (value, from, to, start, thickness) => vertical ? {
+    const anchorOf = (value, from, to, start) => vertical ? {
       value,
-      left: start,
-      right: start + thickness,
+      left: bandStart,
+      right: bandStart + layout.band,
       top: Math.min(pxOf(from), pxOf(to))
     } : {
       value,
@@ -18681,14 +18787,8 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
     if (stacked) {
       const total = stackTotals[hoveredCategory];
       if (total == null) return null;
-      const barStart = layout.offset + hoveredCategory * layout.band + (layout.band - layout.bar) / 2;
-      return anchorOf(
-        total.positive + total.negative,
-        total.negative,
-        total.positive,
-        barStart,
-        layout.bar
-      );
+      const barStart = bandStart + (layout.band - layout.bar) / 2;
+      return anchorOf(total.positive + total.negative, total.negative, total.positive, barStart);
     }
     let bestIndex = -1;
     let bestValue = 0;
@@ -18701,14 +18801,8 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
       }
     });
     if (bestIndex === -1) return null;
-    const groupStart = layout.offset + hoveredCategory * layout.band + (layout.band - layout.group) / 2;
-    return anchorOf(
-      bestValue,
-      0,
-      bestValue,
-      groupStart + bestIndex * (layout.bar + BAR_GAP),
-      layout.bar
-    );
+    const groupStart = bandStart + (layout.band - layout.group) / 2;
+    return anchorOf(bestValue, 0, bestValue, groupStart + bestIndex * (layout.bar + BAR_GAP));
   }, [
     hoveredCategory,
     size.width,
@@ -18734,6 +18828,7 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
       { ...anchorBar, right: anchorBar.right + VALUE_LABEL_GAP + valueLabel.width }
     );
   }, [anchorBar, showValueLabel, vertical, valueLabel.top, valueLabel.width]);
+  const tooltipGapX = vertical ? { after: -4, before: -4 } : void 0;
   const categoryLabels = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -19043,7 +19138,8 @@ var SBarChart = /* @__PURE__ */ react.forwardRef(function SBarChart2({
                   title: categories[hoveredCategory] ?? "",
                   items: tooltipItems,
                   anchor: tooltipAnchor,
-                  bounds: size
+                  bounds: size,
+                  gapX: tooltipGapX
                 }
               )
             ]