@ncds/ui-admin 1.8.27 → 1.8.28-alpha.1

package/dist/cjs/src/components/layout/divider/__tests__/Divider.test.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Divider = require("../Divider");
+// @vitest-environment jsdom
+//
+// Divider (src/components/layout/divider/Divider.tsx) 위험 경로 — 위험 목록표 DV-xx.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_Divider.Divider, props));
+  });
+  return container;
+};
+/** 루트 자식의 클래스 순서 — line · content · line 배치를 본다 */
+const layoutOf = view => Array.from(view.querySelector('.ncua-divider')?.children ?? []).map(child => child.className);
+(0, _vitest.describe)('Divider — 스타일별 배치 (DV-01)', () => {
+  (0, _vitest.it)('DV-01 기본(single-line)은 content 양쪽에 line 을 두고 type·style·className 클래스와 ref 를 연결한다', () => {
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const view = render({
+      type: 'text',
+      className: 'my-divider',
+      children: '또는',
+      ref
+    });
+    const divider = view.querySelector('.ncua-divider');
+    (0, _vitest.expect)(layoutOf(view)).toEqual(['ncua-divider__line', 'ncua-divider__content', 'ncua-divider__line']);
+    (0, _vitest.expect)(view.querySelector('.ncua-divider__content')?.textContent).toBe('또는');
+    (0, _vitest.expect)(divider?.classList.contains('ncua-divider--text')).toBe(true);
+    (0, _vitest.expect)(divider?.classList.contains('ncua-divider--single-line')).toBe(true);
+    (0, _vitest.expect)(divider?.classList.contains('my-divider')).toBe(true);
+    (0, _vitest.expect)(ref.current).toBe(divider);
+  });
+  (0, _vitest.it)('DV-01 background-fill 이면 line 없이 content 만 둔다', () => {
+    const view = render({
+      type: 'heading',
+      style: 'background-fill',
+      children: '제목'
+    });
+    (0, _vitest.expect)(layoutOf(view)).toEqual(['ncua-divider__content']);
+    (0, _vitest.expect)(view.querySelector('.ncua-divider')?.classList.contains('ncua-divider--background-fill')).toBe(true);
+  });
+});

package/dist/cjs/src/components/layout/ncua-scope/__tests__/NcuaScope.test.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _server = require("react-dom/server");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } // @vitest-environment jsdom
+//
+// NcuaScope (src/components/layout/ncua-scope/NcuaScope.tsx) 위험 경로 — 위험 목록표 NS-xx.
+// generated/scoped-css 는 pretest·pretest:coverage 가 만드는 빌드 산출물(gitignore)이다. vite 는 mock 과
+// 무관하게 import 경로를 해석하므로 파일 자체는 있어야 하고, 내용만 고정 문자열로 mock 한다.
+// 테스트 환경 React 는 18.2 — React 19 분기는 react 의 version 만 바꿔 다시 import 해 판단만 덮는다.
+/** 이스케이프되면 깨지는 문자(따옴표·꺾쇠·앰퍼샌드)를 일부러 넣는다 */
+const SCOPED_CSS = ".ncua-scope > .ncua-btn::after { content: 'A & B'; }";
+const loadNcuaScope = async () => {
+  _vitest.vi.doMock('../../../../generated/scoped-css', () => ({
+    NCUA_SCOPED_CSS: SCOPED_CSS
+  }));
+  return (await Promise.resolve().then(() => _interopRequireWildcard(require('../NcuaScope')))).NcuaScope;
+};
+/**
+ * react 의 version 만 바꾼 채 NcuaScope 를 새로 평가한다. 나머지 export 는 원본 그대로라
+ * react-dom 과 같은 React 인스턴스로 렌더된다 (react 는 외부 모듈이라 resetModules 대상이 아니다).
+ */
+const loadNcuaScopeWithReactVersion = version => {
+  _vitest.vi.doMock('react', async importOriginal => ({
+    ...(await importOriginal()),
+    version
+  }));
+  _vitest.vi.resetModules();
+  return loadNcuaScope();
+};
+const restoreReactVersion = () => {
+  _vitest.vi.doUnmock('react');
+  _vitest.vi.resetModules();
+};
+const styles = view => Array.from(view.querySelectorAll('style'));
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const STYLE_KEY = 'ncua-scoped';
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  document.head.innerHTML = '';
+  _vitest.vi.restoreAllMocks();
+});
+const render = node => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(node);
+  });
+  return container;
+};
+(0, _vitest.describe)('NcuaScope — React 18 스타일 주입 (NS-01)', () => {
+  let NcuaScope;
+  (0, _vitest.beforeAll)(async () => {
+    NcuaScope = await loadNcuaScope();
+  });
+  (0, _vitest.it)('NS-01 SSR(renderToString) 결과의 style 안에 scoped CSS 원문을 이스케이프 없이 내보낸다', () => {
+    const html = (0, _server.renderToString)(/*#__PURE__*/(0, _react.createElement)(NcuaScope, null));
+    (0, _vitest.expect)(html).toContain(`<style data-ncua-scope="${STYLE_KEY}">${SCOPED_CSS}</style>`);
+  });
+  (0, _vitest.it)('NS-01 클라이언트 렌더는 data-ncua-scope style 에 scoped CSS 를 넣고 href·precedence 는 없다', () => {
+    const view = render(/*#__PURE__*/(0, _react.createElement)(NcuaScope, null));
+    const style = view.querySelector('style');
+    (0, _vitest.expect)(style?.getAttribute('data-ncua-scope')).toBe(STYLE_KEY);
+    (0, _vitest.expect)(style?.innerHTML).toBe(SCOPED_CSS);
+    (0, _vitest.expect)(style?.hasAttribute('href')).toBe(false);
+    (0, _vitest.expect)(style?.hasAttribute('precedence')).toBe(false);
+  });
+  (0, _vitest.it)('NS-01 style 다음 .ncua-scope div 에 children·className 을 넣고 ref 를 그 div 로 연결한다', () => {
+    const ref = /*#__PURE__*/(0, _react.createRef)();
+    const view = render(/*#__PURE__*/(0, _react.createElement)(NcuaScope, {
+      ref,
+      className: 'page-scope'
+    }, /*#__PURE__*/(0, _react.createElement)('button', null, '신청하기')));
+    const scope = view.querySelector('.ncua-scope');
+    (0, _vitest.expect)(scope?.previousElementSibling?.tagName).toBe('STYLE');
+    (0, _vitest.expect)(scope?.classList.contains('page-scope')).toBe(true);
+    (0, _vitest.expect)(scope?.querySelector('button')?.textContent).toBe('신청하기');
+    (0, _vitest.expect)(ref.current).toBe(scope);
+  });
+});
+(0, _vitest.describe)('NcuaScope — React 18 중첩·형제 (NS-02)', () => {
+  let NcuaScope;
+  (0, _vitest.beforeAll)(async () => {
+    NcuaScope = await loadNcuaScope();
+  });
+  (0, _vitest.it)('NS-02 중첩하면 바깥 NcuaScope 만 style 을 심고 안쪽은 생략한다', () => {
+    const view = render(/*#__PURE__*/(0, _react.createElement)(NcuaScope, {
+      className: 'outer'
+    }, /*#__PURE__*/(0, _react.createElement)(NcuaScope, {
+      className: 'inner'
+    }, '본문')));
+    (0, _vitest.expect)(styles(view)).toHaveLength(1);
+    (0, _vitest.expect)(view.querySelector('.outer > .inner')?.textContent).toBe('본문');
+    (0, _vitest.expect)(view.querySelector('.inner style')).toBeNull();
+  });
+  (0, _vitest.it)('NS-02 형제로 두면 각자 style 을 심는다', () => {
+    const view = render(/*#__PURE__*/(0, _react.createElement)('div', null, /*#__PURE__*/(0, _react.createElement)(NcuaScope, null), /*#__PURE__*/(0, _react.createElement)(NcuaScope, null)));
+    (0, _vitest.expect)(styles(view)).toHaveLength(2);
+  });
+});
+(0, _vitest.describe)('NcuaScope — React 19 이상 스타일 호이스팅 분기 (NS-03)', () => {
+  let NcuaScope;
+  (0, _vitest.beforeAll)(async () => {
+    NcuaScope = await loadNcuaScopeWithReactVersion('19.0.0');
+  });
+  (0, _vitest.afterAll)(() => {
+    restoreReactVersion();
+  });
+  (0, _vitest.it)('NS-03 style 에 href·precedence 를 붙이고 data-ncua-scope 는 없다', () => {
+    const view = render(/*#__PURE__*/(0, _react.createElement)(NcuaScope, null));
+    const style = view.querySelector('style');
+    (0, _vitest.expect)(style?.getAttribute('href')).toBe(STYLE_KEY);
+    (0, _vitest.expect)(style?.getAttribute('precedence')).toBe('default');
+    (0, _vitest.expect)(style?.hasAttribute('data-ncua-scope')).toBe(false);
+    (0, _vitest.expect)(style?.textContent).toBe(SCOPED_CSS);
+  });
+  (0, _vitest.it)('NS-03 중첩·형제 모두 style 을 렌더해 중복 제거를 React 에 맡긴다', () => {
+    const view = render(/*#__PURE__*/(0, _react.createElement)('div', null, /*#__PURE__*/(0, _react.createElement)(NcuaScope, null, /*#__PURE__*/(0, _react.createElement)(NcuaScope, null)), /*#__PURE__*/(0, _react.createElement)(NcuaScope, null)));
+    (0, _vitest.expect)(styles(view).map(style => style.getAttribute('href'))).toEqual([STYLE_KEY, STYLE_KEY, STYLE_KEY]);
+  });
+});
+(0, _vitest.describe)('NcuaScope — React 버전 문자열 해석 (NS-04)', () => {
+  (0, _vitest.afterEach)(() => {
+    restoreReactVersion();
+  });
+  _vitest.it.each([['18.3.1', false], ['19.0.0-rc.1', true], ['20.1.0', true]])('NS-04 React %s 면 호이스팅 분기 여부가 %s 다', async (version, hoisted) => {
+    const NcuaScope = await loadNcuaScopeWithReactVersion(version);
+    const view = render(/*#__PURE__*/(0, _react.createElement)(NcuaScope, null));
+    (0, _vitest.expect)(view.querySelector('style')?.hasAttribute('precedence')).toBe(hoisted);
+  });
+});

package/dist/cjs/src/components/layout/page-title/__tests__/PageTitle.test.js

@@ -0,0 +1,164 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _PageTitle = require("../PageTitle");
+// @vitest-environment jsdom
+//
+// PageTitle (src/components/layout/page-title/PageTitle.tsx) 위험 경로 — 위험 목록표 PT-xx.
+// 뒤로가기 버튼은 Button 실구현으로 렌더한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TITLE = '주문 상세';
+const BACK_LABEL = '이전 페이지로 돌아가기';
+const BREADCRUMB = [{
+  label: '홈',
+  href: '/'
+}, {
+  label: '주문'
+}, {
+  label: '주문 상세'
+}];
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_PageTitle.PageTitle, props));
+  });
+  return container;
+};
+const backButtonOf = view => view.querySelector(`button[aria-label="${BACK_LABEL}"]`);
+const headerRowOf = view => view.querySelector('.ncua-page-title__header');
+(0, _vitest.describe)('PageTitle — 뒤로가기 (PT-01)', () => {
+  _vitest.it.each(['detail', 'fixed-detail'])('PT-01 %s + onBack 이면 뒤로가기 버튼을 두고 click 하면 onBack 을 호출한다', variant => {
+    const onBack = _vitest.vi.fn();
+    const view = render({
+      title: TITLE,
+      variant,
+      onBack
+    });
+    const backButton = backButtonOf(view);
+    (0, _testUtils.act)(() => {
+      backButton?.click();
+    });
+    (0, _vitest.expect)(backButton?.classList.contains('ncua-page-title__back-btn')).toBe(true);
+    (0, _vitest.expect)(backButton?.nextElementSibling?.tagName).toBe('H1');
+    (0, _vitest.expect)(onBack).toHaveBeenCalled();
+  });
+  _vitest.it.each(['default', 'fixed'])('PT-01 %s 면 onBack 이 있어도 뒤로가기 버튼이 없다', variant => {
+    const view = render({
+      title: TITLE,
+      variant,
+      onBack: _vitest.vi.fn()
+    });
+    (0, _vitest.expect)(backButtonOf(view)).toBeNull();
+  });
+  (0, _vitest.it)('PT-01 detail 이어도 onBack 이 없으면 뒤로가기 버튼이 없다', () => {
+    const view = render({
+      title: TITLE,
+      variant: 'detail'
+    });
+    (0, _vitest.expect)(backButtonOf(view)).toBeNull();
+  });
+});
+(0, _vitest.describe)('PageTitle — breadcrumb (PT-02)', () => {
+  (0, _vitest.it)('PT-02 마지막 항목은 current span, 나머지는 href 가 있으면 링크·없으면 텍스트이고 구분 아이콘이 붙는다', () => {
+    const view = render({
+      title: TITLE,
+      breadcrumbItems: BREADCRUMB
+    });
+    const nav = view.querySelector('nav.ncua-page-title__breadcrumb');
+    const items = Array.from(view.querySelectorAll('.ncua-page-title__breadcrumb-item'));
+    (0, _vitest.expect)(nav?.getAttribute('aria-label')).toBe('breadcrumb');
+    (0, _vitest.expect)(items.map(item => item.querySelector('a')?.getAttribute('href') ?? null)).toEqual(['/', null]);
+    (0, _vitest.expect)(items.map(item => item.textContent)).toEqual(['홈', '주문']);
+    (0, _vitest.expect)(view.querySelectorAll('.ncua-page-title__breadcrumb-separator')).toHaveLength(items.length);
+    (0, _vitest.expect)(view.querySelector('.ncua-page-title__breadcrumb-current')?.textContent).toBe('주문 상세');
+    (0, _vitest.expect)(headerRowOf(view)?.classList.contains('ncua-page-title__header--has-breadcrumb')).toBe(true);
+  });
+  _vitest.it.each(['fixed', 'fixed-detail'])('PT-02 %s 면 breadcrumb 을 숨기고 has-breadcrumb 도 없다', variant => {
+    const view = render({
+      title: TITLE,
+      variant,
+      breadcrumbItems: BREADCRUMB
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-page-title__breadcrumb')).toBeNull();
+    (0, _vitest.expect)(headerRowOf(view)?.classList.contains('ncua-page-title__header--has-breadcrumb')).toBe(false);
+  });
+  (0, _vitest.it)('PT-02 breadcrumbItems 가 빈 배열이면 breadcrumb 을 렌더하지 않는다', () => {
+    const view = render({
+      title: TITLE,
+      breadcrumbItems: []
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-page-title__breadcrumb')).toBeNull();
+    (0, _vitest.expect)(headerRowOf(view)?.classList.contains('ncua-page-title__header--has-breadcrumb')).toBe(false);
+  });
+});
+(0, _vitest.describe)('PageTitle — 제목·가이드·액션·클래스 (PT-03)', () => {
+  (0, _vitest.it)('PT-03 title 을 h1 로, guideButton 을 가이드 영역에, secondary → primary 순서로 액션을 렌더한다', () => {
+    const view = render({
+      title: TITLE,
+      guideButton: /*#__PURE__*/(0, _react.createElement)('button', {
+        type: 'button'
+      }, '가이드'),
+      primaryAction: /*#__PURE__*/(0, _react.createElement)('button', {
+        type: 'button'
+      }, '저장'),
+      secondaryAction: /*#__PURE__*/(0, _react.createElement)('button', {
+        type: 'button'
+      }, '취소')
+    });
+    (0, _vitest.expect)(view.querySelector('h1.ncua-page-title__title')?.textContent).toBe(TITLE);
+    (0, _vitest.expect)(view.querySelector('.ncua-page-title__guide-btn')?.textContent).toBe('가이드');
+    (0, _vitest.expect)(Array.from(view.querySelectorAll('.ncua-page-title__actions button')).map(b => b.textContent)).toEqual(['취소', '저장']);
+  });
+  _vitest.it.each([['primaryAction', {
+    primaryAction: /*#__PURE__*/(0, _react.createElement)('span', null, '저장')
+  }], ['secondaryAction', {
+    secondaryAction: /*#__PURE__*/(0, _react.createElement)('span', null, '취소')
+  }]])('PT-03 %s 하나만 있어도 액션 영역을 렌더한다', (_label, actions) => {
+    const view = render({
+      title: TITLE,
+      ...actions
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-page-title__actions')).not.toBeNull();
+  });
+  (0, _vitest.it)('PT-03 액션·가이드가 없으면 두 영역을 렌더하지 않고 fixed 클래스도 없다', () => {
+    const view = render({
+      title: TITLE
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-page-title__actions')).toBeNull();
+    (0, _vitest.expect)(view.querySelector('.ncua-page-title__guide-btn')).toBeNull();
+    (0, _vitest.expect)(view.querySelector('header')?.classList.contains('ncua-page-title--fixed')).toBe(false);
+  });
+  (0, _vitest.it)('PT-03 fixed 계열이면 ncua-page-title--fixed, className·나머지 header 속성을 전달한다', () => {
+    const view = render({
+      title: TITLE,
+      variant: 'fixed',
+      className: 'my-title',
+      id: 'page-title'
+    });
+    const header = view.querySelector('header');
+    (0, _vitest.expect)(header?.classList.contains('ncua-page-title--fixed')).toBe(true);
+    (0, _vitest.expect)(header?.classList.contains('my-title')).toBe(true);
+    (0, _vitest.expect)(header?.id).toBe('page-title');
+  });
+});

package/dist/cjs/src/components/layout/page-title/__tests__/pageTitleStyle.test.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _nodePath = _interopRequireDefault(require("node:path"));
+var _sass = require("sass");
+var _vitest = require("vitest");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// 배경·그림자·패딩은 jsdom 에서 계산되지 않으므로, 컴파일된 CSS 에서 variant 별 규칙을 검사한다.
+// (input-base/__tests__/inputAutofill.test.ts 와 같은 방식 — 컴포넌트 SCSS 엔트리를 직접 컴파일)
+const PAGE_TITLE_SCSS_PATH = _nodePath.default.resolve(__dirname, '../../../../../assets/styles/components/page-title/_index.scss');
+const compiledPageTitleCss = (0, _sass.compile)(PAGE_TITLE_SCSS_PATH).css;
+/** 선택자 → 선언 목록. 같은 선택자가 여러 규칙에 나오면 선언을 이어 붙인다. */
+const parseRules = css => {
+  const rules = new Map();
+  for (const [, selectorList, body] of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+    const declarations = body.split(';').map(declaration => declaration.trim().replace(/\s+/g, ' ')).filter(Boolean);
+    for (const selector of selectorList.split(',').map(selector => selector.trim().replace(/\s+/g, ' '))) {
+      rules.set(selector, [...(rules.get(selector) ?? []), ...declarations]);
+    }
+  }
+  return rules;
+};
+const rules = parseRules(compiledPageTitleCss);
+const declarationsOf = selector => rules.get(selector) ?? [];
+const propertiesOf = selector => declarationsOf(selector).map(declaration => declaration.split(':')[0].trim());
+const ROOT = '.ncua-page-title';
+const FIXED = '.ncua-page-title--fixed';
+const PAGE_HEADER = '.ncua-page-title__page-header';
+const FIXED_PAGE_HEADER = '.ncua-page-title--fixed .ncua-page-title__page-header';
+(0, _vitest.describe)('PageTitle 스타일 — Default (·Detail)', () => {
+  (0, _vitest.it)('.ncua-page-title 에 background·box-shadow 가 없다 (투명, 그림자 없음)', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: 루트 규칙의 속성을 모으면
+    const properties = propertiesOf(ROOT);
+    // Then: 루트 규칙은 존재하지만 배경·그림자를 지정하지 않는다
+    (0, _vitest.expect)(properties.length).toBeGreaterThan(0);
+    (0, _vitest.expect)(properties).not.toContain('background');
+    (0, _vitest.expect)(properties).not.toContain('background-color');
+    (0, _vitest.expect)(properties).not.toContain('box-shadow');
+  });
+  (0, _vitest.it)('.ncua-page-title__page-header 패딩은 32px 40px 0 이다', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: page-header 규칙을 찾으면
+    const declarations = declarationsOf(PAGE_HEADER);
+    // Then: 위 32px · 좌우 40px · 아래 0 이다
+    (0, _vitest.expect)(declarations).toContain('padding: 32px 40px 0');
+    (0, _vitest.expect)(declarations).not.toContain('padding: 24px 40px');
+  });
+});
+(0, _vitest.describe)('PageTitle 스타일 — Fixed (·Fixed Detail)', () => {
+  (0, _vitest.it)('.ncua-page-title--fixed 배경은 --gray-50 이다', () => {
+    // Given: 컴파일된 PageTitle CSS 에서
+    // When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: sticky 로 콘텐츠 위에 겹치므로 배경 Gray/50 을 가진다
+    (0, _vitest.expect)(declarations).toContain('background: var(--gray-50)');
+  });
+  (0, _vitest.it)('.ncua-page-title--fixed 하단 border 는 1px solid --gray-100 이다', () => {
+    // Given/When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: 기존 Gray/300 이 아니라 Gray/100 border 를 쓴다
+    (0, _vitest.expect)(declarations).toContain('border-bottom: 1px solid var(--gray-100)');
+    (0, _vitest.expect)(declarations).not.toContain('border-bottom: 1px solid var(--gray-300)');
+  });
+  (0, _vitest.it)('.ncua-page-title--fixed 에 box-shadow 가 없다', () => {
+    // Given/When: fixed modifier 규칙의 속성을 모으면
+    // Then: 그림자를 지정하지 않는다
+    (0, _vitest.expect)(propertiesOf(FIXED)).not.toContain('box-shadow');
+  });
+  (0, _vitest.it)('Fixed 의 page-header 패딩은 12px 40px 로 유지된다', () => {
+    // Given/When: fixed 하위 page-header 규칙을 찾으면
+    // Then: 기존 Fixed 패딩이 그대로다 (범위 밖)
+    (0, _vitest.expect)(declarationsOf(FIXED_PAGE_HEADER)).toContain('padding: 12px 40px');
+  });
+  (0, _vitest.it)('Fixed sticky 동작(position·top·z-index)은 유지된다', () => {
+    // Given/When: fixed modifier 규칙을 찾으면
+    const declarations = declarationsOf(FIXED);
+    // Then: 기존 sticky 선언이 그대로다
+    (0, _vitest.expect)(declarations).toContain('position: sticky');
+    (0, _vitest.expect)(declarations).toContain('top: 0');
+    (0, _vitest.expect)(declarations).toContain('z-index: 999');
+  });
+});
+(0, _vitest.describe)('PageTitle 스타일 — 토큰 사용', () => {
+  (0, _vitest.it)('배경·border 색상에 하드코딩 값 없이 CSS 변수만 쓴다 (ADR-4)', () => {
+    // Given/When: 루트·fixed 규칙의 배경·border 선언을 모으면
+    const colorDeclarations = [...declarationsOf(ROOT), ...declarationsOf(FIXED)].filter(declaration => /^(background|border-bottom)/.test(declaration));
+    // Then: hex·rgb·색 이름 대신 var(--*) 만 쓴다
+    (0, _vitest.expect)(colorDeclarations.length).toBeGreaterThan(0);
+    for (const declaration of colorDeclarations) {
+      (0, _vitest.expect)(declaration).not.toMatch(/#[0-9a-f]{3,8}\b|rgba?\(|(?<![-\w])white\b/i);
+      (0, _vitest.expect)(declaration).toMatch(/var\(--[a-z0-9-]+\)/);
+    }
+  });
+});