careermate 0.0.8 → 0.0.10

package/dist/public/pages/documents.js

@@ -1,9 +1,9 @@
 // Documents — cover letters (with version history), career descriptions, and résumés/other documents.
 // XSS-safe: all DB/user text rendered via el() textContent / .doc-preview (never innerHTML).
 import {
-  el, get, post, put, del, Card, Badge, Btn, IconBtn, SubmitBtn, EmptyState,
+  el, get, post, put, del, Card, Badge, Btn, SubmitBtn, EmptyState,
   Field, Input, Textarea, Select, openModal, confirmDialog,
-  toastOk, toastError, copyText, fmtRelative, mount, meta, ExportMenu,
+  toastOk, toastError, copyText, fmtRelative, mount, meta, ExportMenu, Menu,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
@@ -21,19 +21,28 @@ export async function render(ctx) {
   const root = el('div', { class: 'stack-4' });
 
   const panel = el('div', {});
-  const tabCover = el('div', { class: `tab${tab === 'cover' ? ' is-active' : ''}`, onClick: () => selectTab('cover') }, t('documents.tab.cover'));
-  const tabCareer = el('div', { class: `tab${tab === 'career' ? ' is-active' : ''}`, onClick: () => selectTab('career') }, t('documents.tab.career'));
-  const tabDocs = el('div', { class: `tab${tab === 'docs' ? ' is-active' : ''}`, onClick: () => selectTab('docs') }, t('documents.tab.docs'));
-  root.append(el('div', { class: 'tabs' }, tabCover, tabCareer, tabDocs), panel);
+  // Tabs are keyboard-operable (activate = role/tabindex/Enter·Space), with tab
+  // semantics for AT — role은 attrs가 먼저 tab으로 지정하므로 activate의 button 기본값을 덮지 않는다.
+  const makeTab = (key, label) =>
+    el('div', {
+      class: `tab${tab === key ? ' is-active' : ''}`,
+      attrs: { role: 'tab', 'aria-selected': String(tab === key) },
+      activate: () => selectTab(key),
+    }, label);
+  const tabCover = makeTab('cover', t('documents.tab.cover'));
+  const tabCareer = makeTab('career', t('documents.tab.career'));
+  const tabDocs = makeTab('docs', t('documents.tab.docs'));
+  root.append(el('div', { class: 'tabs', attrs: { role: 'tablist' } }, tabCover, tabCareer, tabDocs), panel);
 
   let query = '';
   let searchInput = null;
   function selectTab(next) {
     tab = next;
     query = '';
-    tabCover.classList.toggle('is-active', tab === 'cover');
-    tabCareer.classList.toggle('is-active', tab === 'career');
-    tabDocs.classList.toggle('is-active', tab === 'docs');
+    for (const [node, key] of [[tabCover, 'cover'], [tabCareer, 'career'], [tabDocs, 'docs']]) {
+      node.classList.toggle('is-active', tab === key);
+      node.setAttribute('aria-selected', String(tab === key));
+    }
     setActions();
     renderPanel();
   }
@@ -135,12 +144,16 @@ function CoverRow(cl, reload) {
     cl.is_primary ? Badge('accent', t('documents.cover.primary')) : null,
   );
 
+  // Two primary actions stay visible (열기·내보내기); the rest fold into an
+  // overflow menu so the row reads calmly instead of a wall of five buttons.
   const actions = el('div', { class: 'flex gap-2 wrap' },
     Btn(t('documents.cover.open'), { sm: true, icon: 'external', onClick: () => openCoverDetail(cl.id, reload) }),
-    Btn(t('documents.cover.copy'), { sm: true, variant: 'ghost', icon: 'copy', onClick: () => copyText(cl.current_content || ''), disabled: !cl.current_content }),
     ExportMenu(`/api/export/cover-letter/${cl.id}`),
-    cl.is_primary ? null : Btn(t('documents.cover.setPrimary'), { sm: true, variant: 'ghost', icon: 'check', onClick: () => setPrimaryCover(cl.id, reload) }),
-    IconBtn('trash', { variant: 'danger', title: t('documents.cover.delete'), onClick: () => removeCover(cl, reload) }),
+    Menu(t('documents.cover.more'), [
+      cl.current_content ? { label: t('documents.cover.copy'), icon: 'copy', onClick: () => copyText(cl.current_content || '') } : null,
+      cl.is_primary ? null : { label: t('documents.cover.setPrimary'), icon: 'check', onClick: () => setPrimaryCover(cl.id, reload) },
+      { label: t('documents.cover.delete'), icon: 'trash', danger: true, onClick: () => removeCover(cl, reload) },
+    ], { sm: true, icon: null }),
   );
 
   return Card({

package/dist/public/pages/home.js

@@ -6,6 +6,7 @@
 import {
   el, get, icon, navigate, Card, Badge, Btn, ListRow, CheckRow,
   Stat, PageHead, fmtDate, fmtRelative, scoreClass, STATUS_COLOR, statusColor, mount,
+  scheduleDdayBadge,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
@@ -141,6 +142,14 @@ function Pipeline(breakdown) {
   if (total === 0) {
     body = el('p', { class: 'muted', style: { margin: 0 } },
       t('home.pipeline.empty'));
+  } else if (total < 3) {
+    // Too few applications for a stacked bar to read as anything but noise —
+    // show the current stage(s) as one calm line until the pipeline fills in.
+    const detail = PIPE_ORDER.filter((st) => c(st) > 0)
+      .map((st) => t('home.pipeline.small.item', { status: t('status.' + st), count: c(st) }))
+      .join(' · ');
+    body = el('p', { class: 'muted', style: { margin: 0 } },
+      t('home.pipeline.small', { detail }));
   } else {
     const segs = PIPE_ORDER.filter((st) => c(st) > 0).map((st) =>
       el('div', {
@@ -210,16 +219,27 @@ function ActionLane(s) {
     push(it.job.id, ListRow({
       leading: statusDot('document_passed'),
       title: it.job.company,
-      sub: it.job.position,
+      sub: t('home.actionLane.reason.interview'),
       trailing: el('span', { class: 'badge badge--accent' }, el('span', { class: 'dot' }), t('home.actionLane.interviewPrep')),
       onClick: () => navigate(`/jobs/${it.job.id}`),
     }));
   }
+  // Hiring-schedule stages (면접·인적성·발표) sit right after interview prep and before
+  // deadlines: they're the most time-bound "be there on this date" items.
+  for (const it of s.upcoming_schedule || []) {
+    push(it.job.id, ListRow({
+      leading: statusDot('interview'),
+      title: it.job.company,
+      sub: it.time ? `${it.label} · ${it.time}` : it.label,
+      trailing: scheduleDdayBadge(it.d_day),
+      onClick: () => navigate(`/jobs/${it.job.id}`),
+    }));
+  }
   for (const it of s.deadlines || []) {
     push(it.job.id, ListRow({
       leading: statusDot(it.status),
       title: it.job.company,
-      sub: it.job.position,
+      sub: t('home.actionLane.reason.deadline'),
       trailing: ddayBadge(it.days_left),
       onClick: () => navigate(`/jobs/${it.job.id}`),
     }));
@@ -228,8 +248,8 @@ function ActionLane(s) {
     push(it.job.id, ListRow({
       leading: statusDot('applied'),
       title: it.job.company,
-      sub: it.job.position,
-      trailing: Badge('accent', t('home.actionLane.followup', { n: it.days_since })),
+      sub: t('home.actionLane.reason.followup', { n: it.days_since }),
+      trailing: Badge('accent', t('home.actionLane.followupBadge')),
       onClick: () => navigate(`/jobs/${it.job.id}`),
     }));
   }

package/dist/public/pages/insights.js

@@ -0,0 +1,156 @@
+import { el, get, post, Card, Btn, icon, mount, toastOk, toastError } from '/lib.js';
+import { getLang } from '/i18n.js';
+
+const copy = {
+  ko: {
+    title: '진단·데이터 건강도',
+    subtitle: '로컬 데이터 상태, 모순, 출처 확인 대상과 경험 재사용 현황을 한곳에서 점검합니다.',
+    runtime: '실행 환경',
+    health: '데이터 건강도',
+    provenance: '사람 확인이 필요한 정보',
+    reuse: '경험·프로젝트 재사용 지도',
+    healthy: '정상',
+    failed: '확인 필요',
+    verify: '사람이 확인함',
+    empty: '확인할 문제가 없습니다.',
+    score: '건강도 점수',
+    times: '회 사용',
+    local: 'DB와 커리어 데이터는 이 컴퓨터에 저장됩니다.',
+    network: '업데이트 확인·설치 문서·채용 검색은 선택적으로 인터넷을 사용할 수 있습니다.',
+  },
+  en: {
+    title: 'Diagnostics & data health',
+    subtitle: 'Review local storage, contradictions, provenance, and experience reuse.',
+    runtime: 'Runtime checks',
+    health: 'Data health',
+    provenance: 'Needs human verification',
+    reuse: 'Experience & project reuse map',
+    healthy: 'Healthy',
+    failed: 'Needs attention',
+    verify: 'Mark human verified',
+    empty: 'No issues found.',
+    score: 'Health score',
+    times: 'uses',
+    local: 'Your database and career records are stored on this computer.',
+    network: 'Update checks, install docs, and job search may optionally use the internet.',
+  },
+};
+
+function text() {
+  return copy[getLang()] || copy.ko;
+}
+
+function severityBadge(severity) {
+  const label = severity === 'error' ? 'ERROR' : severity === 'warning' ? 'WARN' : 'INFO';
+  return el('span', { class: `badge badge--${severity === 'error' ? 'rejected' : severity === 'warning' ? 'planned' : 'draft'}` }, label);
+}
+
+export async function render(ctx) {
+  const c = text();
+  ctx.setTitle(c.title);
+  ctx.setActions([Btn(c.title, { icon: 'check', sm: true, variant: 'ghost', onClick: () => render(ctx) })]);
+
+  try {
+    const diagnostics = await get('/api/diagnostics');
+    const checks = diagnostics.checks || [];
+    const report = diagnostics.data_health || { score: 0, issues: [], counts: {} };
+    const unverified = diagnostics.unverified_entities || [];
+    const reuseMap = diagnostics.reuse_map || [];
+
+    const localFirst = Card({
+      title: 'Local-first',
+      body: el('div', { class: 'stack-2' },
+        el('div', { class: 'callout callout--privacy' }, icon('lock'), el('div', {},
+          el('div', { class: 'callout__title' }, c.local),
+          el('div', { class: 'callout__body' }, c.network))),
+      ),
+    });
+
+    const runtime = Card({
+      title: c.runtime,
+      body: el('div', { class: 'stack-2' }, ...checks.map((check) =>
+        el('div', { class: 'flex between gap-3' },
+          el('div', {},
+            el('div', { class: 'strong' }, check.label),
+            el('div', { class: 'muted text-sm tnum' }, check.detail || '—')),
+          el('span', { class: `badge badge--${check.ok ? 'final_passed' : 'rejected'}` }, check.ok ? c.healthy : c.failed),
+        ))),
+    });
+
+    const issueList = report.issues?.length
+      ? el('div', { class: 'stack-2' }, ...report.issues.map((issue) =>
+          el('div', { class: 'flex gap-3', style: { alignItems: 'flex-start' } },
+            severityBadge(issue.severity),
+            el('div', {},
+              el('div', { class: 'strong' }, issue.message),
+              el('div', { class: 'muted text-sm' }, `${issue.entity_type}${issue.entity_id ? ` · ${issue.entity_id}` : ''}`)),
+          )))
+      : el('p', { class: 'muted' }, c.empty);
+
+    const health = Card({
+      title: c.health,
+      actions: [el('span', { class: 'badge badge--final_passed tnum' }, `${c.score} ${report.score}`)],
+      body: issueList,
+    });
+
+    const reuse = Card({
+      title: c.reuse,
+      body: reuseMap.length
+        ? el('div', { class: 'stack-2' }, ...reuseMap.map((item) =>
+            el('div', { class: 'flex between gap-3', style: { alignItems: 'flex-start' } },
+              el('div', {},
+                el('div', { class: 'strong' }, item.label),
+                el('div', { class: 'muted text-sm' },
+                  item.cover_letters?.length
+                    ? item.cover_letters.map((letter) => [letter.company, letter.position, letter.title].filter(Boolean).join(' · ')).join(' / ')
+                    : c.empty)),
+              el('span', { class: `badge badge--${item.reuse_count ? 'final_passed' : 'draft'} tnum` }, `${item.reuse_count} ${c.times}`),
+            )))
+        : el('p', { class: 'muted' }, c.empty),
+    });
+
+    async function verify(item, button) {
+      try {
+        button.disabled = true;
+        await post('/api/provenance/verify', {
+          entity_type: item.entity_type,
+          entity_id: item.entity_id,
+          verified: true,
+        });
+        toastOk(c.verify);
+        await render(ctx);
+      } catch (error) {
+        button.disabled = false;
+        toastError(error);
+      }
+    }
+
+    const provenance = Card({
+      title: c.provenance,
+      body: unverified.length
+        ? el('div', { class: 'stack-2' }, ...unverified.map((item) => {
+            const button = Btn(c.verify, { icon: 'check', sm: true, variant: 'ghost' });
+            button.addEventListener('click', () => verify(item, button));
+            return el('div', { class: 'flex between gap-3' },
+              el('div', {},
+                el('div', { class: 'strong' }, `${item.entity_type} · ${item.entity_id}`),
+                el('div', { class: 'muted text-sm' }, item.source_excerpt || item.source)),
+              button,
+            );
+          }))
+        : el('p', { class: 'muted' }, c.empty),
+    });
+
+    mount(ctx.view, el('div', { class: 'stack-4' },
+      el('p', { class: 'muted', style: { marginTop: 0 } }, c.subtitle),
+      localFirst,
+      runtime,
+      health,
+      reuse,
+      provenance,
+    ));
+  } catch (error) {
+    toastError(error);
+    mount(ctx.view, el('div', { class: 'card' }, el('div', { class: 'card__body' }, String(error))));
+  }
+}

package/dist/public/pages/interview.js

@@ -146,12 +146,19 @@ export async function render(ctx) {
       mount(panel, list.length
         ? el('div', { class: 'stack-3' }, ...list.map(QuestionBlock))
         : el('p', { class: 'muted', style: { margin: 0 } }, t('interview.modal.questionsEmptyTab')));
-      for (const c of CATEGORIES) tabEls[c].classList.toggle('is-active', c === active);
+      for (const c of CATEGORIES) {
+        tabEls[c].classList.toggle('is-active', c === active);
+        tabEls[c].setAttribute('aria-selected', String(c === active));
+      }
     }
-    const tabs = el('div', { class: 'tabs' }, ...CATEGORIES.map((c) => {
+    // 키보드 조작 가능 탭(activate = role/tabindex/Enter·Space) + 탭 시맨틱.
+    const tabs = el('div', { class: 'tabs', attrs: { role: 'tablist' } }, ...CATEGORIES.map((c) => {
       const n = groups[c].length;
-      const tabEl = el('div', { class: 'tab', onClick: () => { active = c; draw(); } },
-        n ? `${t('interview.tab.' + c)} (${n})` : t('interview.tab.' + c));
+      const tabEl = el('div', {
+        class: 'tab',
+        attrs: { role: 'tab', 'aria-selected': 'false' },
+        activate: () => { active = c; draw(); },
+      }, n ? `${t('interview.tab.' + c)} (${n})` : t('interview.tab.' + c));
       tabEls[c] = tabEl;
       return tabEl;
     }));

package/dist/public/pages/jobs.js

@@ -6,7 +6,7 @@ import {
   el, get, post, put, del, icon, navigate, Card, Badge, Btn, SubmitBtn,
   EmptyState, Chips, Field, Input, Textarea, Select,
   openModal, closeModal, confirmDialog, toastOk, toastError,
-  fmtDate, scoreClass, mount, meta, linesToArray, csvToArray,
+  fmtDate, scoreClass, mount, meta, linesToArray, csvToArray, daysUntil, scheduleDdayBadge,
 } from '/lib.js';
 import { t } from '/i18n.js';
 
@@ -314,11 +314,11 @@ async function renderDetail(ctx, jobId) {
   ]);
 
   // --- Page head ------------------------------------------------------------
-  // 수정은 상단바(ctx.setActions)에만 둔다 — 여기엔 상태 변경·원문·삭제만.
+  // 수정은 상단바(ctx.setActions)에만 둔다 — 여기엔 상태 변경·원문만.
+  // 삭제는 위험 액션이라 페이지 최하단 '위험 구역'으로 강등한다(아래 DangerZone).
   const headActions = el('div', { class: 'flex gap-2 center wrap' },
     statusSelect,
     job.url ? el('a', { class: 'btn btn--ghost btn--sm', href: job.url, attrs: { target: '_blank', rel: 'noopener noreferrer' } }, icon('external'), el('span', {}, t('jobs.detail.openPosting'))) : null,
-    delBtn,
   );
 
   const head = el('div', { class: 'page-head' },
@@ -340,13 +340,27 @@ async function renderDetail(ctx, jobId) {
       CoverLettersCard(job.cover_letters),
       InterviewCard(job)),
     PostingCard(job),
+    CompanyResearchCard(job),
     FitCard(job.fit),
     TimelineCard(job.timeline),
     RelatedCard(job.related),
+    DangerZone(delBtn),
   );
   mount(ctx.view, wrap);
 }
 
+// Delete is destructive, so it sits at the very bottom in a quiet 위험 구역 row
+// (not a card, per the design guide) instead of competing in the top-right header.
+function DangerZone(delBtn) {
+  return el('div', { class: 'stack-2', style: { marginTop: '8px' } },
+    el('div', { class: 'divider' }),
+    el('div', { class: 'flex between center wrap gap-3' },
+      el('div', { style: { maxWidth: '440px' } },
+        el('div', { class: 'strong text-sm' }, t('jobs.detail.dangerZone')),
+        el('div', { class: 'muted text-sm', style: { lineHeight: '1.6' } }, t('jobs.detail.dangerZoneHint'))),
+      delBtn));
+}
+
 /* ----------------------------------------------------------- detail cards */
 
 function PostingCard(job) {
@@ -372,6 +386,41 @@ function PostingCard(job) {
         ...job.requirements.map((r) => el('li', {}, r)))));
   }
 
+  if (job.questions && job.questions.length) {
+    // 한국 문항형 자소서: 회사 지정 문항·글자수 한도. AI가 문항별 답변을 쓰고 한도를
+    // 점검할 원본이자, 사용자가 대시보드에서 요구 문항을 그대로 볼 수 있게 한다.
+    body.push(el('div', { class: 'mt-3' },
+      el('div', { class: 'muted text-sm mb-2' }, t('jobs.questions.title')),
+      el('ol', { class: 'stack-2', style: { margin: 0, paddingLeft: '18px' } },
+        ...job.questions.map((q) => {
+          const label = questionLimitLabel(q);
+          return el('li', {},
+            el('span', {}, q.question),
+            label ? el('span', { class: 'muted text-sm', style: { marginLeft: '8px' } }, label) : null);
+        }))));
+  }
+
+  if (job.schedule && job.schedule.length) {
+    // 전형 일정: 면접·인적성·발표 등 단계별 날짜. 날짜순으로 D-day 라벨과 함께 보여주고,
+    // 이미 지난 일정은 흐리게 처리한다(v9 문항 블록과 같은 위치·스타일 패턴).
+    const sorted = job.schedule.slice().sort((a, b) => {
+      if (a.date !== b.date) return a.date < b.date ? -1 : 1;
+      return (a.time || '99:99').localeCompare(b.time || '99:99');
+    });
+    body.push(el('div', { class: 'mt-3' },
+      el('div', { class: 'muted text-sm mb-2' }, t('jobs.schedule.title')),
+      el('ul', { class: 'stack-2', style: { margin: 0, padding: 0, listStyle: 'none' } },
+        ...sorted.map((s) => {
+          const dDay = daysUntil(s.date);
+          const when = s.time ? `${fmtDate(s.date)} ${s.time}` : fmtDate(s.date);
+          return el('li', { class: `flex gap-2 center${dDay != null && dDay < 0 ? ' muted' : ''}` },
+            scheduleDdayBadge(dDay),
+            el('span', { class: 'strong' }, s.label),
+            el('span', { class: 'text-sm' }, when),
+            s.note ? el('span', { class: 'muted text-sm' }, s.note) : null);
+        }))));
+  }
+
   if (job.description) {
     // 원문은 가장 길어 칼럼을 늘리는 주범 — 기본 접힘(아코디언)으로 둔다.
     body.push(el('details', { class: 'disclosure mt-3' },
@@ -384,6 +433,40 @@ function PostingCard(job) {
   return Card({ title: t('jobs.posting.title'), body });
 }
 
+// 문항 글자수 한도 라벨(예: "최대 700자(공백포함)"). 한도가 없으면 null.
+// count_mode: with_space=공백포함 · no_space=공백제외 · byte=UTF-8 바이트(공백 구분 없음).
+function questionLimitLabel(q) {
+  const hasMin = typeof q.min_chars === 'number';
+  const hasMax = typeof q.max_chars === 'number';
+  if (!hasMin && !hasMax) return null;
+  const unit = q.count_mode === 'byte' ? t('jobs.questions.unitByte') : t('jobs.questions.unitChar');
+  const suffix = q.count_mode === 'no_space' ? t('jobs.questions.modeNoSpace')
+    : q.count_mode === 'with_space' ? t('jobs.questions.modeWithSpace')
+    : '';
+  const parts = [];
+  if (hasMin) parts.push(t('jobs.questions.min', { n: q.min_chars, unit }));
+  if (hasMax) parts.push(t('jobs.questions.max', { n: q.max_chars, unit }));
+  return `${parts.join(' · ')}${suffix}`;
+}
+
+// Company research the AI saved (overview·인재상·핵심가치·평판) — rendered so the
+// user can actually SEE it in the dashboard, not just have the AI use it.
+function CompanyResearchCard(job) {
+  const hasValues = job.core_values && job.core_values.length;
+  if (!job.company_overview && !job.talent_profile && !hasValues && !job.reputation) return null;
+  const field = (labelKey, value) => el('div', { class: 'mt-3' },
+    el('div', { class: 'muted text-sm mb-2' }, t(labelKey)),
+    el('p', { style: { margin: 0, whiteSpace: 'pre-wrap' } }, value));
+  const body = [];
+  if (job.company_overview) body.push(field('jobs.company.overview', job.company_overview));
+  if (job.talent_profile) body.push(field('jobs.company.talent', job.talent_profile));
+  if (hasValues) body.push(el('div', { class: 'mt-3' },
+    el('div', { class: 'muted text-sm mb-2' }, t('jobs.company.values')),
+    Chips(job.core_values, { accent: true })));
+  if (job.reputation) body.push(field('jobs.company.reputation', job.reputation));
+  return Card({ title: t('jobs.company.title'), body });
+}
+
 function FitCard(fit) {
   if (!fit) {
     return Card({
@@ -464,7 +547,12 @@ function CoverLettersCard(coverLetters) {
           icon('file', 'muted'),
           el('div', {},
             el('div', { class: 'strong' }, cl.title),
-            el('div', { class: 'muted text-sm' }, t('jobs.cover.versions', { count: cl.version_count ?? 1 })))),
+            // Preview line: version count + last-updated date so the row isn't a bare
+            // title. (The latest version's note isn't in this response — listByJob maps
+            // without versions — so we fall back to the date per the design.)
+            el('div', { class: 'muted text-sm' },
+              t('jobs.cover.versions', { count: cl.version_count ?? 1 }),
+              cl.updated_at ? ` · ${fmtDate(cl.updated_at)}` : ''))),
         icon('chevronRight', 'muted')))),
   });
 }

package/dist/public/pages/settings.js

@@ -168,7 +168,6 @@ function Theme() {
 /* ------------------------------------------------------------- 언어 / Language */
 function LanguageSwitcher() {
   // 테마 컴포넌트와 동일 패턴: localStorage 영속 + paint() + 변경 시 재페인트.
-  // 카탈로그가 채워지는 Phase 2부터 페이지 텍스트가 실제로 전환된다.
   const options = [
     { value: 'ko', label: '한국어' },
     { value: 'en', label: 'English' },
@@ -188,8 +187,9 @@ function LanguageSwitcher() {
   onLangChange(paint);
 
   return Card({
+    // 제목은 의도적으로 양언어 병기 — 현재 언어를 못 읽는 사용자도 이 카드를 찾아야 한다.
     title: '언어 / Language',
-    sub: '대시보드 표시 언어',
+    sub: t('settings.lang.sub'),
     body: row,
   });
 }

package/dist/public/styles.css

@@ -419,6 +419,9 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .pipefunnel__value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; line-height: 1.1; }
 .pipefunnel__conv { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
 @media (max-width: 560px){ .pipefunnel { grid-template-columns: repeat(2, 1fr); } }
+/* Home KPI tiles (the only .grid--4) read better as a 2×2 on phones than a single
+   full-width column; overrides the ≤900px collapse for this narrow range. */
+@media (max-width: 560px){ .grid--4 { grid-template-columns: repeat(2, 1fr); } }
 
 /* ----------------------------------------------------------------- check row (onboarding)
    The ONE place setup guidance lives. Outcome rows auto-detect completion. */
@@ -577,3 +580,16 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
   .card__head .right{ margin-left: 0; width: 100%; justify-content: flex-start; }
   .page-head{ flex-wrap: wrap; }
 }
+
+/* ---------- reduced motion ----------
+   전정기관 민감 사용자를 위해 OS 설정을 존중한다: 모달·토스트·오프캔버스의
+   등장 애니메이션과 hover 트랜지션을 사실상 즉시(0.01ms)로 줄인다.
+   (스켈레톤 shimmer 포함 — 반복 애니메이션이 가장 부담이 크다.) */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}