@unson/brainbase-mcp 0.41.11 → 0.42.0

package/ui/local-web-shell.js

@@ -17,6 +17,7 @@
 
 import { createGraphProjectsView } from './graph-projects-view.js';
 import { createGraphRegistryView } from './graph-registry-view.js';
+import { createGraphOntologyView } from './graph-ontology-view.js';
 import { createPeopleAndCompaniesView } from './people-and-companies-view.js';
 import { createObjectiveEditorController } from './objective-editor.js';
 import { createObjectiveEditorHttpPort } from './objective-editor-http-port.js';
@@ -25,8 +26,11 @@ import { createMeetingMinutesUI } from './meeting-minutes.js';
 import { createMeetingMinutesStorageExtension } from './meeting-minutes-storage.js';
 import { createMeetingMinutesLineageExtension } from './meeting-minutes-lineage-http.js';
 import { createWorldModelView } from './world-model-view.js';
+import { createPersonalMemoryUI, parsePersonalMemoryRoute, personalMemoryRouteTarget } from './personal-memory.js';
+import { createPersonalMemoryHttpPort } from './personal-memory-http-port.js';
 import { createGraphClient } from './graph-view-shared.js';
 import { installNativeScrollbars } from './native-scrollbars.js';
+import { browserAreaStorage, createAreaMemory, createAreaNav } from './area-nav.js';
 
 export const LOCAL_WEB_SHELL_CONTRACT_VERSION = 'brainbase.local-web-shell.v1';
 
@@ -51,22 +55,32 @@ const NAV_ICON_PATHS = Object.freeze({
   minutes: ['M6 3.5h9l3 3V20.5H6z', 'M15 3.5v4h3', 'M9 12h6m-6 3h6'],
   // Two people (the organization edition's 人と会社 uses the same shape).
   people: ['M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z', 'M2.5 20a6.5 6.5 0 0 1 13 0', 'M16 4.5a3.5 3.5 0 0 1 0 6.5', 'M18 14a6.5 6.5 0 0 1 3.5 6'],
+  // あなたの記憶 (ledger D15): one person and a lock, seen only by the owner.
+  memory: ['M10 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z', 'M3.5 20a6.5 6.5 0 0 1 10-5.5', 'M15 15h6v5h-6z', 'M16.5 15v-1.5a1.5 1.5 0 0 1 3 0V15'],
+  // Kinds of information and how they connect (settings, ledger D14): three linked boxes.
+  ontology: ['M4 4h6v6H4z', 'M14 14h6v6h-6z', 'M14 4h6v6h-6z', 'M10 7h4', 'M17 10v4'],
   // World view (extension id `world`, ledger P17).
   world: ['M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z', 'M3 12h18', 'M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'],
+  // Areas whose screens have their own icons (ledger D10, stage 2): a briefcase, and
+  // the organization edition's gear.
+  'area:work': ['M4 8h16v11H4z', 'M9 8V5h6v3', 'M4 13h16'],
+  'area:settings': ['M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915', 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'],
 });
 // Screens without their own icon (for example a private product's extension).
 const DEFAULT_NAV_ICON_PATHS = Object.freeze(['M5 20V10m7 10V4m7 16v-7']);
 const SVG_NS = 'http://www.w3.org/2000/svg';
 
-// The menu's areas (brainbase-project ledger D10): the same order and headings
-// as the organization edition. 目的と現状 is the only item of its area, so it
-// has no heading. Inside an area, `order` lists the screens first in that order.
+// The menu's areas (brainbase-project ledger D10): the same order and names as
+// the organization edition. The left side lists only the areas; the screens of
+// the current area are tabs above the page (stage 2). 目的と現状 is the only
+// screen of its area and keeps its own name. Inside an area, `order` lists the
+// screens first in that order; `defaultScreen` opens when nothing is remembered.
 const NAV_AREAS = Object.freeze([
-  Object.freeze({ id: 'purpose', label: null, order: ['objectives'] }),
-  Object.freeze({ id: 'work', label: '仕事', order: ['projects', 'minutes'] }),
-  Object.freeze({ id: 'outcomes', label: '成果', order: ['value-proofs'] }),
-  Object.freeze({ id: 'information', label: '情報と関係', order: ['graph', 'people'] }),
-  Object.freeze({ id: 'settings', label: '設定', order: [] }),
+  Object.freeze({ id: 'purpose', label: null, order: ['objectives'], icon: 'objectives' }),
+  Object.freeze({ id: 'work', label: '仕事', order: ['projects', 'minutes'], defaultScreen: 'projects', icon: 'area:work' }),
+  Object.freeze({ id: 'outcomes', label: '成果', order: ['value-proofs'], icon: 'value-proofs' }),
+  Object.freeze({ id: 'information', label: '情報と関係', order: ['graph', 'people', 'memory'], defaultScreen: 'graph', icon: 'graph' }),
+  Object.freeze({ id: 'settings', label: '設定', order: ['ontology'], defaultScreen: 'ontology', icon: 'area:settings' }),
 ]);
 
 // Menu order only: the screens' own order (and so the first screen) stays as given.
@@ -88,6 +102,23 @@ function navLayout(screens) {
   return { leading, areas, trailing };
 }
 
+// Every menu line is an area: a screen without an area is an area of its own.
+function navAreas(screens) {
+  const layout = navLayout(screens);
+  const own = (screen) => ({ id: screen.id, label: null, screenIds: [screen.id], icon: screen.id });
+  return [
+    ...layout.leading.map(own),
+    ...layout.areas.map(({ area, screens: members }) => ({
+      id: area.id,
+      label: area.label,
+      defaultScreen: area.defaultScreen,
+      screenIds: members.map((screen) => screen.id),
+      icon: area.icon,
+    })),
+    ...layout.trailing.map(own),
+  ];
+}
+
 function makeIcon(doc, id) {
   const paths = NAV_ICON_PATHS[id] ?? DEFAULT_NAV_ICON_PATHS;
   const create = (tag) => (typeof doc.createElementNS === 'function' ? doc.createElementNS(SVG_NS, tag) : doc.createElement(tag));
@@ -136,11 +167,14 @@ export function parseLocalWebTarget(target) {
   // プロジェクトと関係者 one project (`project` = Graph project id); other screens ignore them.
   const decisionId = screenId === 'value-proofs' ? params.get('decision')?.trim() || null : null;
   const projectId = screenId === 'projects' ? params.get('project')?.trim() || null : null;
+  // あなたの記憶 keeps its filters and the opened memory (never the search words).
+  const memoryRoute = screenId === 'memory' ? parsePersonalMemoryRoute(params) : null;
   return {
     screenId,
     entityId: screenId === 'graph' ? params.get('entity_id')?.trim() || null : null,
     ...(decisionId ? { decisionId } : {}),
     ...(projectId ? { projectId } : {}),
+    ...(memoryRoute ? { memoryRoute } : {}),
   };
 }
 
@@ -201,6 +235,26 @@ function judgmentReferenceLabelReader(context) {
   };
 }
 
+function personalMemoryPort(context) {
+  return createPersonalMemoryHttpPort({ fetcher: context.fetcher, token: context.token });
+}
+
+/** The opening of each used memory, for 判断の履歴's 本人の考え; the local host has one owner. */
+function personalMemoryResolver(context) {
+  const port = personalMemoryPort(context);
+  return async (refs) => {
+    const list = await port.listMemories({});
+    if (list.status !== 'ok') throw new Error(list.reason);
+    const wanted = new Set(refs);
+    const found = new Map();
+    for (const item of list.items) {
+      if (!wanted.has(item.id)) continue;
+      found.set(item.id, { excerpt: item.text, href: `#${personalMemoryRouteTarget({ memoryId: item.id })}` });
+    }
+    return found;
+  };
+}
+
 function mountToday(container, context) {
   return createJudgmentHistoryUI({
     root: makePage(container, context),
@@ -211,6 +265,23 @@ function mountToday(container, context) {
     token: context.token,
     basePath: '/api/judgment-history',
     resolveReferenceLabels: judgmentReferenceLabelReader(context),
+    resolvePersonalMemory: personalMemoryResolver(context),
+  });
+}
+
+function mountPersonalMemory(container, context) {
+  return createPersonalMemoryUI({
+    root: makePage(container, context),
+    rail: context.rail,
+    page: context.page,
+    document: context.document,
+    port: personalMemoryPort(context),
+    judgmentHref: (decisionId) => `#value-proofs?decision=${encodeURIComponent(decisionId)}`,
+    candidatesCommand: 'brainbase onboard:candidates',
+    route: context.initialEntityId ?? undefined,
+    onRouteChange: context.navigate
+      ? (route, options) => context.navigate(personalMemoryRouteTarget(route), options)
+      : undefined,
   });
 }
 
@@ -299,7 +370,7 @@ function mountGraphScreen(screenId, createView, extra = {}) {
       fetcher: context.fetcher,
       token: context.token,
       initialEntityId: context.initialEntityId,
-      ...extra,
+      ...(typeof extra === 'function' ? extra(context) : extra),
     });
   };
 }
@@ -309,8 +380,15 @@ export const LOCAL_WEB_SCREENS = Object.freeze([
   Object.freeze({ id: 'minutes', label: '議事録', area: 'work', usesGraph: false, rail: true, source: '正本の議事録', mount: mountMeetingMinutes }),
   Object.freeze({ id: 'objectives', label: '目的と現状', area: 'purpose', usesGraph: true, rail: true, source: '手元のGraph', mount: mountObjectives }),
   Object.freeze({ id: 'projects', label: 'プロジェクトと関係者', area: 'work', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('projects', createGraphProjectsView) }),
-  Object.freeze({ id: 'graph', label: '情報と関係', area: 'information', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('graph', createGraphRegistryView) }),
+  // A record of 情報と関係 opens as its own screen at `#graph?entity_id=…`; the list is `#graph`.
+  Object.freeze({ id: 'graph', label: '情報と関係', area: 'information', usesGraph: true, rail: false, source: '手元のGraph', mount: mountGraphScreen('graph', createGraphRegistryView, (context) => ({
+    onRouteChange: (entityId, options) => context.navigate?.(entityId ? `graph?entity_id=${encodeURIComponent(entityId)}` : 'graph', options),
+  })) }),
   Object.freeze({ id: 'people', label: '人と会社', area: 'information', usesGraph: true, rail: true, source: '手元のGraph', mount: mountGraphScreen('people', createPeopleAndCompaniesView, { canCorrect: true }) }),
+  // Only the owner sees it (ledger D15); the local host has one owner, so it is always listed here.
+  Object.freeze({ id: 'memory', label: 'あなたの記憶', area: 'information', usesGraph: false, rail: true, ownerOnly: true, source: '手元の個人KG', mount: mountPersonalMemory }),
+  // The definitions behind 情報と関係: infrequent management work, so under settings (ledger D14).
+  Object.freeze({ id: 'ontology', label: '情報の種類とつながり方', area: 'settings', usesGraph: true, rail: false, source: '手元のGraph', mount: mountGraphScreen('ontology', createGraphOntologyView, { canCorrect: true }) }),
 ]);
 
 function renderGraphGate(doc, slot, status, onRecheck, label) {
@@ -394,19 +472,26 @@ export function createLocalWebShell({
   initialScreen,
   meetingMinutesStorage = null,
   meetingMinutesLineage = null,
+  areaMemory = createAreaMemory(browserAreaStorage()),
+  onNavigate,
+  // A host that serves more than one person passes false for anyone but the owner:
+  // owner-only screens (あなたの記憶) are then neither listed nor mounted.
+  isOwner = true,
 } = {}) {
   if (!root) throw new TypeError('root is required');
   const doc = explicitDocument ?? (typeof document === 'undefined' ? null : document);
   if (!doc || typeof doc.createElement !== 'function') throw new Error('document_unavailable');
+  screens = screens.filter((screen) => isOwner === true || screen.ownerOnly !== true);
   const request = typeof fetcher === 'function'
     ? fetcher
     : typeof globalThis.fetch === 'function' ? (path, init) => globalThis.fetch(path, init) : null;
-  const context = Object.freeze({ document: doc, fetcher: request, token, meetingMinutesStorage, meetingMinutesLineage });
+  // `navigate(target, { back })` lets a screen give its own state an address (the host's hash).
+  const navigate = typeof onNavigate === 'function' ? (target, options = {}) => onNavigate(target, options) : null;
+  const context = Object.freeze({ document: doc, fetcher: request, token, meetingMinutesStorage, meetingMinutesLineage, navigate });
 
   const status = { phase: 'loading', data: null, error: null };
   const mounted = new Map();
   const slots = new Map();
-  const links = new Map();
   const pendingEntityIds = new Map();
   let active = null;
 
@@ -427,37 +512,27 @@ export function createLocalWebShell({
   };
   menuButton.addEventListener('click', () => setMenuOpen(!sidebar.className.includes('is-open')));
   backdrop.addEventListener('click', () => setMenuOpen(false));
-  const navLink = (screen) => {
-    const link = makeElement(doc, 'a', { className: 'bb-shell-nav-link', text: screen.label, attrs: { href: `#${screen.id}` } });
-    // The label stays the link's own text; the icon goes in front where the DOM allows it.
-    if (typeof link.prepend === 'function') link.prepend(makeIcon(doc, screen.id));
-    link.addEventListener('click', () => {
+  const areaList = navAreas(screens);
+  const areaNav = createAreaNav({
+    document: doc,
+    areas: areaList,
+    screens: screens.map((screen) => ({ id: screen.id, label: screen.label })),
+    memory: areaMemory,
+    linkClassName: 'bb-shell-nav-link',
+    iconFor: (area) => makeIcon(doc, areaList.find((entry) => entry.id === area.id)?.icon ?? area.id),
+    onSelect: (screenId) => {
       setMenuOpen(false);
-      controller.show(screen.id);
-    });
-    links.set(screen.id, link);
-    return link;
-  };
-  const layout = navLayout(screens);
-  for (const screen of layout.leading) nav.append(navLink(screen));
-  for (const { area, screens: members } of layout.areas) {
-    if (!area.label) {
-      for (const screen of members) nav.append(navLink(screen));
-      continue;
-    }
-    const headId = `bb-shell-nav-area-${area.id}`;
-    const group = makeElement(doc, 'div', { className: 'bb-shell-nav-group', attrs: { role: 'group', 'aria-labelledby': headId } });
-    group.append(makeElement(doc, 'div', { className: 'bb-shell-nav-group-head', text: area.label, attrs: { id: headId } }));
-    for (const screen of members) group.append(navLink(screen));
-    nav.append(group);
-  }
-  for (const screen of layout.trailing) nav.append(navLink(screen));
+      controller.show(screenId);
+    },
+  });
+  nav.append(areaNav.nav);
   const source = makeElement(doc, 'section', { className: 'bb-shell-source', attrs: { 'aria-label': '出典' } });
   sidebar.append(brand, nav, source);
   const workspace = makeElement(doc, 'div', { className: 'bb-shell-workspace' });
   const mobileBar = makeElement(doc, 'div', { className: 'bb-shell-mobile-bar' });
   mobileBar.append(makeElement(doc, 'strong', { text: 'Brainbase' }), menuButton);
   const main = makeElement(doc, 'main', { className: 'bb-shell-main' });
+  main.append(areaNav.tabs);
   for (const screen of screens) {
     const slot = makeElement(doc, 'section', { className: 'bb-shell-screen', attrs: { 'data-screen': screen.id, 'aria-label': screen.label } });
     slot.hidden = true;
@@ -493,8 +568,11 @@ export function createLocalWebShell({
     if (mounted.has(screen.id)) {
       const view = mounted.get(screen.id);
       if (entityId && screen.id === 'graph' && typeof view?.openEntity === 'function') void view.openEntity(entityId);
+      // `#graph` without a record is the list: a record still open there closes (the browser's back).
+      if (!entityId && screen.id === 'graph' && view?.state?.detail && typeof view.closeEntity === 'function') view.closeEntity();
       if (entityId && screen.id === 'value-proofs' && typeof view?.openDecision === 'function') view.openDecision(entityId);
       if (entityId && screen.id === 'projects' && typeof view?.openProject === 'function') void view.openProject(entityId);
+      if (entityId && screen.id === 'memory' && typeof view?.applyRoute === 'function') view.applyRoute(entityId);
       return;
     }
     const slot = slots.get(screen.id);
@@ -508,6 +586,7 @@ export function createLocalWebShell({
     const page = Object.freeze({ crumbs: Object.freeze(['あなたのBrainbase', screen.label]), source: screen.source ?? null });
     const view = screen.mount(slot, Object.freeze({ ...context, rail, page, initialEntityId: entityId })) ?? true;
     mounted.set(screen.id, view);
+    if (screen.id === 'memory' && typeof view?.load === 'function') void view.load();
     if (entityId && screen.id === 'value-proofs' && typeof view?.openDecision === 'function') view.openDecision(entityId);
     if (entityId && screen.id === 'projects' && typeof view?.openProject === 'function') void view.openProject(entityId);
     updateRail();
@@ -523,13 +602,12 @@ export function createLocalWebShell({
       const screen = screens.find((candidate) => candidate.id === parsed.screenId) ?? screens[0];
       pendingEntityIds.set(screen.id, screen.id === 'graph' ? parsed.entityId
         : screen.id === 'value-proofs' ? parsed.decisionId ?? null
-          : screen.id === 'projects' ? parsed.projectId ?? null : null);
+          : screen.id === 'projects' ? parsed.projectId ?? null
+            // あなたの記憶 receives its whole route (filters and the opened memory).
+            : screen.id === 'memory' ? parsed.memoryRoute ?? null : null);
       active = screen.id;
       for (const [screenId, slot] of slots) slot.hidden = screenId !== screen.id;
-      for (const [screenId, link] of links) {
-        if (screenId === screen.id) link.setAttribute('aria-current', 'page');
-        else link.removeAttribute('aria-current');
-      }
+      areaNav.show(screen.id);
       ensureMounted(screen, pendingEntityIds.get(screen.id));
       updateRail();
       return controller;

package/ui/outcome-knowledge.js

@@ -84,6 +84,9 @@ const SCOPE_LABELS = Object.freeze({
 
 const LIFECYCLE_STATUS_LABELS = Object.freeze({
   active: '有効',
+  decided: '決定済み',
+  active_reference: '参照用',
+  unknown: UNKNOWN,
   inactive: '無効',
   retired: '失効',
   superseded: '置換済み',
@@ -1480,7 +1483,8 @@ export function createKnowledgeOverviewController(options = {}) {
   const { root, api, onSelectProject } = options;
   if (!root || typeof root.replaceChildren !== 'function') throw new Error('knowledge_root_unavailable');
   const labels = resolveKnowledgeUiLabels(options.labels);
-  const itemsBase = optionalText(options.itemsPath).trim() || `/api/knowledge/${KNOWLEDGE_ROUTES.items}`;
+  // A host path may already carry conditions (for example `?limit=100`); keep them and add the filters.
+  const [itemsBase, itemsBaseQuery = ''] = (optionalText(options.itemsPath).trim() || `/api/knowledge/${KNOWLEDGE_ROUTES.items}`).split(/\?(.*)/s);
   const state = {
     filters: { q: '', scope: 'all', status: 'active' },
     list: { state: 'loading', records: null, absence_confirmed: false, searched_scope: null },
@@ -1491,7 +1495,7 @@ export function createKnowledgeOverviewController(options = {}) {
   const projectName = (code) => projectOptions(options.projects).find((option) => option.code === code)?.name ?? null;
 
   function itemsPath() {
-    const query = new URLSearchParams();
+    const query = new URLSearchParams(itemsBaseQuery);
     if (state.filters.q) query.set('q', state.filters.q);
     if (state.filters.scope) query.set('scope', state.filters.scope);
     if (state.filters.status) query.set('status', state.filters.status);

package/ui/people-and-companies-view.css

@@ -1,8 +1,9 @@
 /*
  * 「人と会社」. Load after workspace-kit.css and graph-view-shared.css.
  * Column templates of the people and company ledgers, the group titles,
- * the write buttons, the recorded company note and the relations in the
- * right rail, with a 760px variant.
+ * the add buttons, the recorded company note, and a record's page (the way
+ * back, its head, the actions gathered under it and its relations), with a
+ * 760px variant.
  * Uses only the shared tokens in brainbase-tokens.css.
  */
 .bb-pc-people,
@@ -67,25 +68,12 @@
   font-size: 12px;
 }
 
-.bb-graph-rail .bb-pc-fix {
-  display: grid;
-  gap: 6px;
-  margin: 16px 0 0;
-  color: var(--bb-color-muted);
-  font-size: 12px;
-}
-
-.bb-pc-actions,
 .bb-pc-relation-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
 
-.bb-pc-actions {
-  margin: 0 0 12px;
-}
-
 .bb-pc-company-cell {
   display: grid;
   gap: 2px;
@@ -102,6 +90,11 @@
 }
 
 @media (max-width: 760px) {
+  /* Below a host's top bar on a phone. */
+  .bb-pc-detail {
+    scroll-margin-top: 72px;
+  }
+
   .bb-pc-people-ledger .bb-ws-ledger-row {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px;
   }
@@ -262,3 +255,161 @@
   align-items: center;
   min-height: 46px;
 }
+
+/* A record's page (2026-10-16). Choosing a row turns the workspace into the
+   record's page, as a CRM does: the way back with the record's place, the
+   head, then what can be done to it, gathered in one place with what the page
+   says about it (nothing is deleted; why an action is disabled). */
+.bb-pc-action-group {
+  display: grid;
+  gap: 8px;
+  margin: 0 0 20px;
+}
+
+.bb-pc-action-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.bb-pc-action-row .bb-ws-button.is-primary {
+  border-color: var(--bb-color-action);
+  background: var(--bb-color-action);
+  color: var(--bb-color-action-text);
+}
+
+.bb-pc-action-row .bb-ws-button.is-primary:hover:not(:disabled) {
+  border-color: var(--bb-color-action-hover);
+  background: var(--bb-color-action-hover);
+}
+
+.bb-pc-action-row .bb-ws-button[data-adds]::before {
+  content: '＋';
+}
+
+.bb-pc-action-note,
+.bb-pc-action-reason {
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.bb-pc-action-reason {
+  justify-self: start;
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: var(--bb-color-warning-soft);
+  color: var(--bb-color-warning);
+}
+
+.bb-pc-action-note a {
+  color: var(--bb-color-accent-strong);
+}
+
+.bb-pc-add {
+  margin-top: -4px;
+}
+
+.bb-pc-detail {
+  display: grid;
+  gap: 0;
+  scroll-margin-top: 16px;
+}
+
+.bb-pc-detail-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--bb-color-border);
+}
+
+.bb-pc-detail-nav .bb-pc-back {
+  margin-right: auto;
+}
+
+.bb-pc-detail-place {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: 4px;
+  color: var(--bb-color-muted);
+  font-size: 12px;
+}
+
+.bb-pc-detail-nav .bb-ws-button[aria-label='前へ'],
+.bb-pc-detail-nav .bb-ws-button[aria-label='次へ'] {
+  min-width: 32px;
+  padding-inline: 8px;
+}
+
+.bb-pc-detail-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  margin: 0 0 18px;
+  scroll-margin-top: 16px;
+}
+
+.bb-pc-mark.bb-pc-detail-mark {
+  width: 44px;
+  height: 44px;
+  margin: 0;
+  font-size: 18px;
+}
+
+.bb-pc-company-mark.bb-pc-detail-mark {
+  border-radius: 10px;
+}
+
+.bb-pc-detail-copy {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.bb-pc-detail-copy h2 {
+  margin: 0;
+  color: var(--bb-color-ink);
+  font-size: 22px;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+  scroll-margin-top: 16px;
+}
+
+.bb-pc-detail-copy h2:focus {
+  outline: none;
+}
+
+.bb-pc-detail-sub {
+  margin: 0;
+  color: var(--bb-color-muted);
+  font-size: 13px;
+}
+
+.bb-pc-detail-lead {
+  margin: 4px 0 0;
+  color: var(--bb-color-ink);
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.bb-pc-detail-actions {
+  padding: 14px 16px;
+  border: 1px solid var(--bb-color-border);
+  border-radius: 10px;
+  background: var(--bb-color-canvas);
+}
+
+.bb-pc-detail-block {
+  margin: 0 0 22px;
+}
+
+.bb-pc-detail-block h3 {
+  margin: 0 0 6px;
+  color: var(--bb-color-ink);
+  font-size: 13px;
+}