careermate 0.0.5 → 0.0.7

package/dist/public/pages/settings.js

@@ -4,18 +4,11 @@ import {
   el, get, post, icon, navigate, Card, Btn, IconBtn, Input,
   openModal, copyText, downloadUrl, fmtRelative, toastOk, toastError, mount,
 } from '/lib.js';
+import { t, getLang, setLang, onLangChange } from '/i18n.js';
 
-const COUNT_LABELS = {
-  profile: '프로필', experiences: '경력', projects: '프로젝트', skills: '기술',
-  documents: '문서', cover_letters: '자기소개서', jobs: '채용공고',
-  applications: '지원', interview_preps: '면접 준비',
-};
-const BACKUP_COUNT_LABELS = {
-  ...COUNT_LABELS,
-  cover_letter_versions: '자소서 버전',
-  fit_analyses: '적합도 분석',
-  activities: '활동',
-};
+// Data keys whose human labels come from t('settings.count.<key>').
+const COUNT_KEYS = ['profile', 'experiences', 'projects', 'skills', 'documents', 'cover_letters', 'jobs', 'applications', 'interview_preps'];
+const countLabel = (key) => t('settings.count.' + key);
 
 export async function render(ctx) {
   ctx.setActions([]);
@@ -25,9 +18,11 @@ export async function render(ctx) {
     DataLocation(info),
     Connection(info),
     Theme(),
+    LanguageSwitcher(),
     VerifyMode(info),
     MyData(info.counts),
     Backup(backups, async () => { await ctx.refreshNav(); await render(ctx); }),
+    Support(),
     DangerZone(ctx),
   );
 
@@ -42,53 +37,57 @@ function kvRow(label, value, copyable) {
       el('div', { class: 'flex between gap-3' },
         el('span', { class: 'truncate tnum', style: { fontFamily: 'var(--mono, ui-monospace, monospace)' }, title: value }, value || '—'),
         copyable && value
-          ? IconBtn('copy', { title: '복사', onClick: () => copyText(value) })
+          ? IconBtn('copy', { title: t('settings.copy'), onClick: () => copyText(value) })
           : null)),
   ];
 }
 
 function DataLocation(info) {
   const kv = el('dl', { class: 'kv' },
-    ...kvRow('데이터 폴더', info.data_dir, true),
-    ...kvRow('데이터베이스', info.db_path, true),
-    ...kvRow('앱 버전', info.version, false),
-    ...kvRow('Node 버전', info.node_version, false),
+    ...kvRow(t('settings.dataLocation.dataDir'), info.data_dir, true),
+    ...kvRow(t('settings.dataLocation.database'), info.db_path, true),
+    ...kvRow(t('settings.dataLocation.appVersion'), info.version, false),
+    ...kvRow(t('settings.dataLocation.nodeVersion'), info.node_version, false),
   );
 
   const privacy = el('div', { class: 'callout callout--privacy' },
     icon('lock'),
     el('div', {},
-      el('div', { class: 'callout__title' }, '내 컴퓨터에만 저장됩니다'),
+      el('div', { class: 'callout__title' }, t('settings.dataLocation.privacyTitle')),
       el('div', { class: 'callout__body' },
-        '모든 데이터는 이 컴퓨터에만 저장됩니다. 외부로 전송되지 않습니다. AI에는 사용자가 직접 입력하거나 AI가 MCP로 조회한 정보만 전달됩니다.')));
+        t('settings.dataLocation.privacyBody'))));
 
   return Card({
-    title: '데이터 저장 위치',
+    title: t('settings.dataLocation.title'),
     body: el('div', { class: 'stack-3' }, kv, privacy),
   });
 }
 
 /* ---------------------------------------------------------- 연결 상태 */
 function Connection(info) {
+  const isDemo = !!info.demo;
+
   async function createShortcut() {
     try {
       const { shortcut } = await post('/api/settings/dashboard-shortcut', { open: true });
-      toastOk('대시보드 바로가기를 만들었어요.');
+      toastOk(isDemo ? t('settings.connection.shortcutDemoToast') : t('settings.connection.shortcutToast'));
       openModal({
-        title: '바로가기 생성',
+        title: isDemo ? t('settings.connection.shortcutDemoTitle') : t('settings.connection.shortcutTitle'),
         body: el('div', { class: 'stack-3' },
           el('div', { class: 'callout' },
             icon('info'),
             el('div', {},
-              el('div', { class: 'callout__title' }, '폴더를 만들었습니다'),
+              el('div', { class: 'callout__title' }, isDemo ? t('settings.connection.shortcutDemoCalloutTitle') : t('settings.connection.shortcutCalloutTitle')),
               el('div', { class: 'callout__body' },
-                '대시보드가 실행 중이면 브라우저만 열고, 꺼져 있으면 서버를 시작한 뒤 브라우저를 엽니다.'))),
+                isDemo
+                  ? t('settings.connection.shortcutDemoCalloutBody')
+                  : t('settings.connection.shortcutCalloutBody')))),
           el('dl', { class: 'kv' },
-            ...kvRow('폴더', shortcut.shortcut_dir, true),
-            ...kvRow('바로가기', shortcut.launcher_path, true))),
+            ...kvRow(t('settings.connection.shortcutFolder'), shortcut.shortcut_dir, true),
+            ...kvRow(t('settings.connection.shortcutLauncher'), shortcut.launcher_path, true))),
         footer: (close) => [
-          Btn('경로 복사', { icon: 'copy', onClick: () => copyText(shortcut.launcher_path) }),
-          Btn('확인', { variant: 'primary', onClick: close }),
+          Btn(t('settings.copyPath'), { icon: 'copy', onClick: () => copyText(shortcut.launcher_path) }),
+          Btn(t('settings.confirm'), { variant: 'primary', onClick: close }),
         ],
       });
     } catch (e) {
@@ -98,23 +97,23 @@ function Connection(info) {
 
   const dashRow = el('div', { class: 'settings-action-row flex between gap-3', style: { padding: '4px 0' } },
     el('div', { class: 'settings-action-row__main flex gap-3', style: { alignItems: 'center' } },
-      el('span', { class: 'badge badge--final_passed' }, el('span', { class: 'dot' }), '실행 중'),
+      el('span', { class: 'badge badge--final_passed' }, el('span', { class: 'dot' }), t('settings.connection.running')),
       el('div', {},
-        el('div', { class: 'strong' }, '대시보드'),
+        el('div', { class: 'strong' }, t('settings.connection.dashboard')),
         el('div', { class: 'muted text-sm tnum' }, info.url || '—'))),
-    Btn('바로가기 만들기', { icon: 'copy', sm: true, variant: 'ghost', onClick: createShortcut }));
+    Btn(t('settings.connection.createShortcut'), { icon: 'copy', sm: true, variant: 'ghost', onClick: createShortcut }));
 
   const mcpRow = el('div', { class: 'settings-action-row flex between gap-3', style: { padding: '4px 0', alignItems: 'flex-start' } },
     el('div', { class: 'settings-action-row__main flex gap-3', style: { alignItems: 'flex-start' } },
       el('div', { class: 'empty__icon', style: { width: '30px', height: '30px', margin: 0, borderRadius: '8px' } }, icon('link')),
       el('div', {},
-        el('div', { class: 'strong' }, 'MCP 서버'),
+        el('div', { class: 'strong' }, t('settings.connection.mcpServer')),
         el('div', { class: 'muted text-sm', style: { maxWidth: '440px', lineHeight: '1.6' } },
-          'MCP 서버는 사용하시는 AI 클라이언트(Claude·ChatGPT·Cursor)가 직접 실행하며, 이 대시보드와 같은 데이터베이스를 공유합니다.'))),
-    Btn('설치·연결 안내 열기', { icon: 'external', sm: true, variant: 'ghost', onClick: () => window.open('/install', '_blank') }));
+          t('settings.connection.mcpBody')))),
+    Btn(t('settings.connection.openInstall'), { icon: 'external', sm: true, variant: 'ghost', onClick: () => window.open(isDemo ? '/start.html' : '/install', '_blank') }));
 
   return Card({
-    title: '연결 상태',
+    title: t('settings.connection.title'),
     body: el('div', { class: 'stack-2' }, dashRow, el('div', { class: 'divider' }), mcpRow),
   });
 }
@@ -128,9 +127,9 @@ function currentTheme() {
 
 function Theme() {
   const options = [
-    { value: 'light', label: '라이트' },
-    { value: 'dark', label: '다크' },
-    { value: 'system', label: '시스템' },
+    { value: 'light', key: 'settings.theme.light' },
+    { value: 'dark', key: 'settings.theme.dark' },
+    { value: 'system', key: 'settings.theme.system' },
   ];
 
   const row = el('div', { class: 'flex gap-2 wrap' });
@@ -151,7 +150,7 @@ function Theme() {
   function paint() {
     const active = currentTheme();
     mount(row, ...options.map((o) => {
-      const b = Btn(o.label, { variant: 'ghost', onClick: () => applyTheme(o.value) });
+      const b = Btn(t(o.key), { variant: 'ghost', onClick: () => applyTheme(o.value) });
       b.setAttribute('aria-pressed', String(o.value === active));
       if (o.value === active) b.classList.add('is-selected');
       return b;
@@ -160,8 +159,37 @@ function Theme() {
   paint();
 
   return Card({
-    title: '테마',
-    sub: '시스템 설정을 따르거나 직접 고를 수 있어요',
+    title: t('settings.theme.title'),
+    sub: t('settings.theme.sub'),
+    body: row,
+  });
+}
+
+/* ------------------------------------------------------------- 언어 / Language */
+function LanguageSwitcher() {
+  // 테마 컴포넌트와 동일 패턴: localStorage 영속 + paint() + 변경 시 재페인트.
+  // 카탈로그가 채워지는 Phase 2부터 페이지 텍스트가 실제로 전환된다.
+  const options = [
+    { value: 'ko', label: '한국어' },
+    { value: 'en', label: 'English' },
+  ];
+  const row = el('div', { class: 'flex gap-2 wrap' });
+
+  function paint() {
+    const active = getLang();
+    mount(row, ...options.map((o) => {
+      const b = Btn(o.label, { variant: 'ghost', onClick: () => setLang(o.value) });
+      b.setAttribute('aria-pressed', String(o.value === active));
+      if (o.value === active) b.classList.add('is-selected');
+      return b;
+    }));
+  }
+  paint();
+  onLangChange(paint);
+
+  return Card({
+    title: '언어 / Language',
+    sub: '대시보드 표시 언어',
     body: row,
   });
 }
@@ -169,8 +197,8 @@ function Theme() {
 /* ------------------------------------------------- 자소서 수치 점검 모드 */
 function VerifyMode(info) {
   const options = [
-    { value: false, label: '기본', desc: '저장된 경력·이력서·프로젝트에 아예 근거가 없는 수치만 차단' },
-    { value: true, label: '엄격', desc: '이력서 본문에 없고 구조화 경력/프로젝트 항목에만 있는 수치까지 차단' },
+    { value: false, labelKey: 'settings.verify.basic', descKey: 'settings.verify.basicDesc' },
+    { value: true, labelKey: 'settings.verify.strict', descKey: 'settings.verify.strictDesc' },
   ];
   let current = !!info.verify_strict;
   const row = el('div', { class: 'flex gap-2 wrap' });
@@ -180,7 +208,7 @@ function VerifyMode(info) {
     try {
       const res = await post('/api/settings/verify-mode', { strict: value });
       current = !!res.verify_strict;
-      toastOk(current ? '엄격 모드를 켰어요.' : '엄격 모드를 껐어요.');
+      toastOk(current ? t('settings.verify.strictOnToast') : t('settings.verify.strictOffToast'));
       paint();
     } catch (e) {
       toastError(e);
@@ -189,7 +217,7 @@ function VerifyMode(info) {
 
   function paint() {
     mount(row, ...options.map((o) => {
-      const b = Btn(o.label, { variant: 'ghost', onClick: () => set(o.value) });
+      const b = Btn(t(o.labelKey), { variant: 'ghost', onClick: () => set(o.value) });
       b.setAttribute('aria-pressed', String(o.value === current));
       if (o.value === current) b.classList.add('is-selected');
       return b;
@@ -198,27 +226,27 @@ function VerifyMode(info) {
   paint();
 
   const note = el('div', { class: 'muted text-sm', style: { lineHeight: '1.7', marginTop: '10px' } },
-    el('div', {}, el('span', { class: 'strong' }, '기본'), ' — ', options[0].desc),
-    el('div', {}, el('span', { class: 'strong' }, '엄격'), ' — ', options[1].desc),
+    el('div', {}, el('span', { class: 'strong' }, t('settings.verify.basic')), ' — ', t('settings.verify.basicDesc')),
+    el('div', {}, el('span', { class: 'strong' }, t('settings.verify.strict')), ' — ', t('settings.verify.strictDesc')),
     el('div', { style: { marginTop: '6px' } },
-      '엄격 모드에선 올린 이력서에 없는 수치가 막힐 수 있어요. 막히면 이력서를 올리거나 모드를 끄세요. AI에게 "엄격하게 봐줘"라고 해도 켤 수 있습니다.'));
+      t('settings.verify.note')));
 
   return Card({
-    title: '자소서 수치 점검',
-    sub: 'AI가 쓴 수치가 내 실제 데이터에 근거가 있는지 저장 전에 자동으로 확인합니다',
+    title: t('settings.verify.title'),
+    sub: t('settings.verify.sub'),
     body: el('div', { class: 'stack-2' }, row, note),
   });
 }
 
 /* ---------------------------------------------------------- 내 데이터 */
 function MyData(counts = {}) {
-  const items = Object.entries(COUNT_LABELS).map(([key, label]) =>
+  const items = COUNT_KEYS.map((key) =>
     el('div', { class: 'countstrip__item' },
       el('div', { class: 'countstrip__num tnum' }, String(counts[key] ?? 0)),
-      el('div', { class: 'countstrip__label' }, label)));
+      el('div', { class: 'countstrip__label' }, countLabel(key))));
   return Card({
-    title: '내 데이터',
-    sub: '이 컴퓨터에 저장된 항목 수',
+    title: t('settings.myData.title'),
+    sub: t('settings.myData.sub'),
     body: el('div', { class: 'countstrip' }, ...items),
   });
 }
@@ -246,7 +274,7 @@ function Backup(backups = [], rerender) {
   async function createBackup() {
     try {
       const res = await post('/api/settings/backup');
-      toastOk('백업을 생성했어요.');
+      toastOk(t('settings.backup.createToast'));
       await rerender();
     } catch (e) {
       toastError(e);
@@ -256,19 +284,19 @@ function Backup(backups = [], rerender) {
   const list = backups.length
     ? el('table', { class: 'table' },
         el('thead', {}, el('tr', {},
-          el('th', {}, '파일'), el('th', {}, '생성'), el('th', { style: { textAlign: 'right' } }, '크기'))),
+          el('th', {}, t('settings.backup.colFile')), el('th', {}, t('settings.backup.colCreated')), el('th', { style: { textAlign: 'right' } }, t('settings.backup.colSize')))),
         el('tbody', {}, ...backups.map((b) => el('tr', {},
           el('td', {}, el('span', { class: 'truncate', title: b.path || b.filename }, b.filename)),
           el('td', { class: 'muted text-sm' }, fmtRelative(b.created_at)),
-          el('td', { class: 'muted text-sm tnum', style: { textAlign: 'right' } }, `${Math.round((b.size || 0) / 1024)} KB`)))))
-    : el('p', { class: 'muted', style: { margin: 0 } }, '아직 로컬 백업이 없습니다. "현재 상태 백업"으로 지금 데이터를 보관하세요.');
+          el('td', { class: 'muted text-sm tnum', style: { textAlign: 'right' } }, t('settings.backup.size', { kb: Math.round((b.size || 0) / 1024) }))))))
+    : el('p', { class: 'muted', style: { margin: 0 } }, t('settings.backup.empty'));
 
   return Card({
-    title: '내보내기 / 가져오기',
+    title: t('settings.backup.title'),
     actions: [
-      Btn('내보내기(JSON)', { icon: 'download', sm: true, variant: 'primary', onClick: () => downloadUrl('/api/settings/export-all') }),
-      Btn('가져오기(JSON)', { icon: 'upload', sm: true, variant: 'ghost', onClick: () => fileInput.click() }),
-      Btn('현재 상태 백업', { icon: 'copy', sm: true, variant: 'ghost', onClick: createBackup }),
+      Btn(t('settings.backup.export'), { icon: 'download', sm: true, variant: 'primary', onClick: () => downloadUrl('/api/settings/export-all') }),
+      Btn(t('settings.backup.import'), { icon: 'upload', sm: true, variant: 'ghost', onClick: () => fileInput.click() }),
+      Btn(t('settings.backup.create'), { icon: 'copy', sm: true, variant: 'ghost', onClick: createBackup }),
     ],
     body: el('div', { class: 'stack-3' }, fileInput, list),
   });
@@ -277,12 +305,12 @@ function Backup(backups = [], rerender) {
 function readBackupFile(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
-    reader.onerror = () => reject(new Error('백업 파일을 읽지 못했어요.'));
+    reader.onerror = () => reject(new Error(t('settings.backup.readError')));
     reader.onload = () => {
       try {
         resolve(JSON.parse(String(reader.result || '')));
       } catch {
-        reject(new Error('JSON 백업 파일만 복원할 수 있어요.'));
+        reject(new Error(t('settings.backup.parseError')));
       }
     };
     reader.readAsText(file);
@@ -290,66 +318,73 @@ function readBackupFile(file) {
 }
 
 function fmtBackupDate(iso) {
-  if (!iso) return '알 수 없음';
+  if (!iso) return t('settings.backup.unknownDate');
   const d = new Date(iso);
   if (Number.isNaN(d.getTime())) return iso;
-  return `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+  return new Intl.DateTimeFormat(getLang(), { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }).format(d);
+}
+
+// Resolve a backup-count data key to its human label (falls back to the raw key).
+function backupCountLabel(key) {
+  const label = t('settings.count.' + key);
+  return label === 'settings.count.' + key ? key : label;
 }
 
 function previewRows(counts = {}) {
   const entries = Object.entries(counts)
     .filter(([, count]) => Number(count) > 0)
-    .sort(([a], [b]) => (BACKUP_COUNT_LABELS[a] || a).localeCompare(BACKUP_COUNT_LABELS[b] || b, 'ko'));
+    .sort(([a], [b]) => backupCountLabel(a).localeCompare(backupCountLabel(b), getLang()));
 
   if (!entries.length) {
-    return el('p', { class: 'muted', style: { margin: 0 } }, '복원할 항목이 없습니다.');
+    return el('p', { class: 'muted', style: { margin: 0 } }, t('settings.preview.empty'));
   }
 
   return el('table', { class: 'table' },
-    el('thead', {}, el('tr', {}, el('th', {}, '데이터'), el('th', { style: { textAlign: 'right' } }, '항목'))),
+    el('thead', {}, el('tr', {}, el('th', {}, t('settings.preview.colData')), el('th', { style: { textAlign: 'right' } }, t('settings.preview.colCount')))),
     el('tbody', {}, ...entries.map(([key, count]) => el('tr', {},
-      el('td', {}, BACKUP_COUNT_LABELS[key] || key),
+      el('td', {}, backupCountLabel(key)),
       el('td', { class: 'tnum', style: { textAlign: 'right' } }, String(count))))));
 }
 
 function openImportModal({ fileName, backup, preview, rerender }) {
   let confirmBtn;
+  const gateWord = t('settings.import.gateWord');
   const input = Input({
-    placeholder: '가져오기',
-    onInput: (e) => { if (confirmBtn) confirmBtn.disabled = e.target.value.trim() !== '가져오기'; },
+    placeholder: gateWord,
+    onInput: (e) => { if (confirmBtn) confirmBtn.disabled = e.target.value.trim() !== gateWord; },
     onKeydown: (e) => {
-      if (e.key === 'Enter' && e.target.value.trim() === '가져오기' && confirmBtn && !confirmBtn.disabled) confirmBtn.click();
+      if (e.key === 'Enter' && e.target.value.trim() === gateWord && confirmBtn && !confirmBtn.disabled) confirmBtn.click();
     },
   });
 
   openModal({
-    title: '데이터 가져오기',
+    title: t('settings.import.title'),
     size: 'lg',
     body: el('div', { class: 'stack-3' },
       el('div', { class: 'callout' },
         icon('info'),
         el('div', {},
-          el('div', { class: 'callout__title' }, '현재 데이터는 먼저 백업됩니다'),
+          el('div', { class: 'callout__title' }, t('settings.import.calloutTitle')),
           el('div', { class: 'callout__body' },
-            '가져오면 이 컴퓨터의 CareerMate 데이터가 선택한 JSON 내용으로 전체 교체됩니다.'))),
+            t('settings.import.calloutBody')))),
       el('dl', { class: 'kv' },
-        ...kvRow('파일', fileName, false),
-        ...kvRow('백업 시각', fmtBackupDate(preview.exported_at), false),
-        ...kvRow('스키마', `${preview.version} / 현재 ${preview.current_version}`, false),
-        ...kvRow('전체 항목', String(preview.total_rows || 0), false)),
+        ...kvRow(t('settings.import.file'), fileName, false),
+        ...kvRow(t('settings.import.exportedAt'), fmtBackupDate(preview.exported_at), false),
+        ...kvRow(t('settings.import.schema'), t('settings.import.schemaValue', { version: preview.version, current: preview.current_version }), false),
+        ...kvRow(t('settings.import.totalRows'), String(preview.total_rows || 0), false)),
       previewRows(preview.counts),
       preview.warnings?.length
         ? el('div', { class: 'callout' },
             icon('info'),
             el('div', {},
-              el('div', { class: 'callout__title' }, '확인 필요'),
+              el('div', { class: 'callout__title' }, t('settings.import.warningsTitle')),
               el('div', { class: 'callout__body' }, preview.warnings.join(' '))))
         : null,
       el('p', { class: 'text-secondary', style: { margin: 0, lineHeight: '1.6' } },
-        '계속하려면 아래 입력란에 ', el('span', { class: 'strong' }, '가져오기'), ' 를 입력하세요.'),
+        t('settings.import.instruction', { word: gateWord })),
       input),
     footer: (close) => {
-      confirmBtn = Btn('가져오기', {
+      confirmBtn = Btn(t('settings.import.confirm'), {
         icon: 'upload',
         variant: 'danger',
         disabled: true,
@@ -358,45 +393,62 @@ function openImportModal({ fileName, backup, preview, rerender }) {
           try {
             await post('/api/settings/restore', { backup, confirm: 'RESTORE' });
             close();
-            toastOk('데이터를 가져왔어요.');
+            toastOk(t('settings.import.doneToast'));
             await rerender();
           } catch (e) {
             toastError(e);
-            confirmBtn.disabled = input.value.trim() !== '가져오기';
+            confirmBtn.disabled = input.value.trim() !== gateWord;
           }
         },
       });
-      return [Btn('취소', { onClick: close }), confirmBtn];
+      return [Btn(t('settings.cancel'), { onClick: close }), confirmBtn];
     },
   });
 }
 
 /* -------------------------------------------------- 위험 구역 (Danger zone) */
+/* ----------------------------------------------------- 도움말 · 문제 신고 */
+function Support() {
+  const ext = (href, iconName, label) =>
+    el('a', { class: 'btn btn--ghost btn--sm', href, attrs: { target: '_blank', rel: 'noopener noreferrer' } },
+      icon(iconName), el('span', {}, label));
+  return Card({
+    title: t('settings.support.title'),
+    sub: t('settings.support.sub'),
+    body: el('div', { class: 'flex gap-2 wrap' },
+      ext('https://github.com/osntak/careermate/issues/new?template=bug_report.yml', 'external', t('settings.support.report')),
+      ext('https://github.com/osntak/careermate/discussions', 'external', t('settings.support.ask')),
+      el('a', { class: 'btn btn--ghost btn--sm', href: 'mailto:osntak@gmail.com' }, icon('mail'), el('span', {}, t('settings.support.email'))),
+    ),
+  });
+}
+
 function DangerZone(ctx) {
   function openResetModal() {
     let confirmBtn;
-    // Gate on the Korean word so there's no IME switch and it matches the '초기화' button.
+    // Gate on the locale-resolved word so there's no IME switch and it matches the button.
     // (The API still expects the fixed 'DELETE' token; we send that on the wire below.)
+    const gateWord = t('settings.reset.gateWord');
     const input = Input({
-      placeholder: '초기화',
-      onInput: (e) => { if (confirmBtn) confirmBtn.disabled = e.target.value.trim() !== '초기화'; },
-      onKeydown: (e) => { if (e.key === 'Enter' && e.target.value.trim() === '초기화' && confirmBtn && !confirmBtn.disabled) confirmBtn.click(); },
+      placeholder: gateWord,
+      onInput: (e) => { if (confirmBtn) confirmBtn.disabled = e.target.value.trim() !== gateWord; },
+      onKeydown: (e) => { if (e.key === 'Enter' && e.target.value.trim() === gateWord && confirmBtn && !confirmBtn.disabled) confirmBtn.click(); },
     });
 
     openModal({
-      title: '모든 데이터 초기화',
+      title: t('settings.reset.title'),
       body: el('div', { class: 'stack-3' },
         el('div', { class: 'callout' },
           icon('info'),
           el('div', {},
-            el('div', { class: 'callout__title' }, '되돌릴 수 없습니다'),
+            el('div', { class: 'callout__title' }, t('settings.reset.calloutTitle')),
             el('div', { class: 'callout__body' },
-              '프로필·공고·지원·문서·면접 준비를 포함한 모든 데이터가 영구적으로 삭제됩니다. 안전을 위해 초기화 직전에 자동으로 백업이 한 번 생성됩니다.'))),
+              t('settings.reset.calloutBody')))),
         el('p', { class: 'text-secondary', style: { margin: 0, lineHeight: '1.6' } },
-          '계속하려면 아래 입력란에 ', el('span', { class: 'strong' }, '초기화'), ' 를 입력하세요.'),
+          t('settings.reset.instruction', { word: gateWord })),
         input),
       footer: (close) => {
-        confirmBtn = Btn('모든 데이터 초기화', {
+        confirmBtn = Btn(t('settings.reset.confirm'), {
           variant: 'danger',
           disabled: true,
           onClick: async () => {
@@ -404,28 +456,28 @@ function DangerZone(ctx) {
             try {
               await post('/api/settings/reset', { confirm: 'DELETE' });
               close();
-              toastOk('모든 데이터를 초기화했어요.');
+              toastOk(t('settings.reset.doneToast'));
               navigate('/');
               await ctx.refreshNav();
             } catch (e) {
               toastError(e);
-              confirmBtn.disabled = input.value.trim() !== 'DELETE';
+              confirmBtn.disabled = input.value.trim() !== gateWord;
             }
           },
         });
-        return [Btn('취소', { onClick: close }), confirmBtn];
+        return [Btn(t('settings.cancel'), { onClick: close }), confirmBtn];
       },
     });
   }
 
   return Card({
-    title: '위험 구역',
-    sub: '이 작업은 되돌릴 수 없습니다',
+    title: t('settings.danger.title'),
+    sub: t('settings.danger.sub'),
     body: el('div', { class: 'flex between gap-3 wrap' },
       el('div', { style: { maxWidth: '440px' } },
-        el('div', { class: 'strong' }, '모든 데이터 초기화'),
+        el('div', { class: 'strong' }, t('settings.danger.resetTitle')),
         el('div', { class: 'muted text-sm', style: { lineHeight: '1.6' } },
-          '이 컴퓨터에 저장된 모든 CareerMate 데이터를 삭제합니다. 초기화 전에 자동으로 백업이 생성됩니다.')),
-      Btn('모든 데이터 초기화', { icon: 'trash', variant: 'danger', onClick: openResetModal })),
+          t('settings.danger.resetBody'))),
+      Btn(t('settings.danger.resetTitle'), { icon: 'trash', variant: 'danger', onClick: openResetModal })),
   });
 }

package/dist/public/styles.css

@@ -61,7 +61,7 @@
   --maxw: 1080px;
 
   --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
-    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
+    'Segoe UI', system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
   --mono: 'SFMono-Regular', 'JetBrains Mono', Consolas, 'D2Coding', monospace;
 }
 
@@ -317,6 +317,33 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 .tl-item__line { width: 2px; flex: 1; background: var(--border); margin: 4px 0; }
 .tl-item:last-child .tl-item__line { display: none; }
 .tl-item__body { padding-bottom: 16px; }
+.timeline--job .tl-item__dot { margin-top: 7px; }
+.timeline-event__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
+.timeline-event__title { font-weight: 650; font-size: 14px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.timeline-event__summary { margin-top: 3px; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; }
+.timeline-event__extra { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
+.timeline-event__meta { color: var(--text-tertiary); font-size: 13px; }
+.timeline-docs { display: flex; flex-direction: column; gap: 4px; }
+.timeline-ref { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; }
+.timeline-ref__label { flex: none; color: var(--text-tertiary); }
+.timeline-ref__link {
+  appearance: none; border: 0; background: transparent; color: var(--text); padding: 1px 4px;
+  border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.timeline-ref__link:hover { background: var(--surface-hover); text-decoration: underline; }
+.timeline-ref__missing { color: var(--text-tertiary); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.timeline-ref__deleted { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--bg-sunken); color: var(--text-tertiary); font-size: 11.5px; font-weight: 650; }
+.pick-list { display: flex; flex-direction: column; gap: 6px; }
+.pick-row {
+  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1px solid var(--border);
+  border-radius: var(--radius-sm); cursor: pointer; background: var(--surface);
+}
+.pick-row:hover { background: var(--surface-hover); border-color: var(--border-strong); }
+.pick-row input { margin-top: 3px; flex: none; }
+.pick-row__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.pick-row__title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pick-row__sub { color: var(--text-tertiary); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
 /* ----------------------------------------------------------------- kanban */
 .board { display: grid; grid-auto-flow: column; grid-auto-columns: 272px; gap: 14px; overflow-x: auto; padding-bottom: 8px; }