careermate 0.0.4 → 0.0.6

package/dist/public/pages/settings.js

@@ -4,12 +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: '면접 준비',
-};
+// 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([]);
@@ -19,9 +18,11 @@ export async function render(ctx) {
     DataLocation(info),
     Connection(info),
     Theme(),
+    LanguageSwitcher(),
     VerifyMode(info),
     MyData(info.counts),
-    Backup(backups, () => render(ctx)),
+    Backup(backups, async () => { await ctx.refreshNav(); await render(ctx); }),
+    Support(),
     DangerZone(ctx),
   );
 
@@ -36,55 +37,83 @@ 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 dashRow = el('div', { class: 'flex between gap-3', style: { padding: '4px 0' } },
-    el('div', { class: 'flex gap-3', style: { alignItems: 'center' } },
-      el('span', { class: 'badge badge--final_passed' }, el('span', { class: 'dot' }), '실행 중'),
+  const isDemo = !!info.demo;
+
+  async function createShortcut() {
+    try {
+      const { shortcut } = await post('/api/settings/dashboard-shortcut', { open: true });
+      toastOk(isDemo ? t('settings.connection.shortcutDemoToast') : t('settings.connection.shortcutToast'));
+      openModal({
+        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' }, 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(t('settings.connection.shortcutFolder'), shortcut.shortcut_dir, true),
+            ...kvRow(t('settings.connection.shortcutLauncher'), shortcut.launcher_path, true))),
+        footer: (close) => [
+          Btn(t('settings.copyPath'), { icon: 'copy', onClick: () => copyText(shortcut.launcher_path) }),
+          Btn(t('settings.confirm'), { variant: 'primary', onClick: close }),
+        ],
+      });
+    } catch (e) {
+      toastError(e);
+    }
+  }
+
+  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' }), 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 || '—'))),
-    info.url
-      ? Btn('새 탭에서 열기', { icon: 'external', sm: true, variant: 'ghost', onClick: () => window.open(info.url, '_blank') })
-      : null);
+    Btn(t('settings.connection.createShortcut'), { icon: 'copy', sm: true, variant: 'ghost', onClick: createShortcut }));
 
-  const mcpRow = el('div', { class: 'flex between gap-3', style: { padding: '4px 0', alignItems: 'flex-start' } },
-    el('div', { class: 'flex gap-3', style: { alignItems: 'flex-start' } },
+  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),
   });
 }
@@ -98,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' });
@@ -121,17 +150,46 @@ 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;
+    }));
+  }
+  paint();
+
+  return Card({
+    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: '테마',
-    sub: '시스템 설정을 따르거나 직접 고를 수 있어요',
+    title: '언어 / Language',
+    sub: '대시보드 표시 언어',
     body: row,
   });
 }
@@ -139,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' });
@@ -150,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);
@@ -159,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;
@@ -168,37 +226,55 @@ 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),
   });
 }
 
-/* ------------------------------------------------- 백업 / 내보내기 */
+/* ------------------------------------------------- 내보내기 / 가져오기 */
 function Backup(backups = [], rerender) {
+  const fileInput = el('input', {
+    type: 'file',
+    accept: '.json,application/json',
+    style: { display: 'none' },
+    onChange: async (e) => {
+      const file = e.target.files?.[0];
+      e.target.value = '';
+      if (!file) return;
+      try {
+        const backup = await readBackupFile(file);
+        const { preview } = await post('/api/settings/import-preview', { backup });
+        openImportModal({ fileName: file.name, backup, preview, rerender });
+      } catch (err) {
+        toastError(err);
+      }
+    },
+  });
+
   async function createBackup() {
     try {
       const res = await post('/api/settings/backup');
-      toastOk('백업을 생성했어요.');
+      toastOk(t('settings.backup.createToast'));
       await rerender();
     } catch (e) {
       toastError(e);
@@ -208,49 +284,171 @@ 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('백업 생성', { icon: 'copy', sm: true, variant: 'primary', onClick: createBackup }),
-      Btn('전체 데이터 내보내기(JSON)', { icon: 'download', sm: true, variant: 'ghost', onClick: () => downloadUrl('/api/settings/export-all') }),
+      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: list,
+    body: el('div', { class: 'stack-3' }, fileInput, list),
+  });
+}
+
+function readBackupFile(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(new Error(t('settings.backup.readError')));
+    reader.onload = () => {
+      try {
+        resolve(JSON.parse(String(reader.result || '')));
+      } catch {
+        reject(new Error(t('settings.backup.parseError')));
+      }
+    };
+    reader.readAsText(file);
+  });
+}
+
+function fmtBackupDate(iso) {
+  if (!iso) return t('settings.backup.unknownDate');
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  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]) => backupCountLabel(a).localeCompare(backupCountLabel(b), getLang()));
+
+  if (!entries.length) {
+    return el('p', { class: 'muted', style: { margin: 0 } }, t('settings.preview.empty'));
+  }
+
+  return el('table', { class: 'table' },
+    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', {}, 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: 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: 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' }, t('settings.import.calloutTitle')),
+          el('div', { class: 'callout__body' },
+            t('settings.import.calloutBody')))),
+      el('dl', { class: 'kv' },
+        ...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' }, t('settings.import.warningsTitle')),
+              el('div', { class: 'callout__body' }, preview.warnings.join(' '))))
+        : null,
+      el('p', { class: 'text-secondary', style: { margin: 0, lineHeight: '1.6' } },
+        t('settings.import.instruction', { word: gateWord })),
+      input),
+    footer: (close) => {
+      confirmBtn = Btn(t('settings.import.confirm'), {
+        icon: 'upload',
+        variant: 'danger',
+        disabled: true,
+        onClick: async () => {
+          confirmBtn.disabled = true;
+          try {
+            await post('/api/settings/restore', { backup, confirm: 'RESTORE' });
+            close();
+            toastOk(t('settings.import.doneToast'));
+            await rerender();
+          } catch (e) {
+            toastError(e);
+            confirmBtn.disabled = input.value.trim() !== gateWord;
+          }
+        },
+      });
+      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 () => {
@@ -258,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;
 }
 
@@ -190,10 +190,10 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 
 /* ----------------------------------------------------------------- card */
 .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
-.card__head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
+.card__head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; min-width: 0; }
 .card__head h3 { font-size: 15px; }
 .card__head .sub { color: var(--text-tertiary); font-size: 13px; }
-.card__head .right { margin-left: auto; display: flex; gap: 6px; }
+.card__head .right { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
 .card__body { padding: 18px; }
 .card__body--tight { padding: 0; }
 /* a light bordered block for grouping inside a card/modal — never nest a full .card */
@@ -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; }
@@ -417,6 +444,10 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
 /* min-width:0 overrides a grid item's default min-width:auto so the 1fr column
    can shrink below its content — otherwise a long path/value overflows the grid. */
 .kv dd { margin: 0; min-width: 0; }
+.settings-action-row { align-items: flex-start; min-width: 0; }
+.settings-action-row__main { flex: 1 1 auto; min-width: 0; }
+.settings-action-row__main > div:last-child { min-width: 0; }
+.settings-action-row > .btn { flex: 0 0 auto; }
 
 /* ----------------------------------------------------------------- modal */
 .modal-root { position: fixed; inset: 0; z-index: 60; display: none; }
@@ -505,5 +536,9 @@ h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
   .kv{ grid-template-columns: 1fr; gap: 0; }
   .kv dt{ margin-top: 10px; }
   .kv dd{ margin: 0 0 2px; }
+  .settings-action-row{ align-items: stretch; flex-direction: column; }
+  .settings-action-row > .btn{ width: 100%; justify-content: center; }
+  .card__head{ align-items: flex-start; flex-wrap: wrap; }
+  .card__head .right{ margin-left: 0; width: 100%; justify-content: flex-start; }
   .page-head{ flex-wrap: wrap; }
 }